Darren Krape

Awhile back I wrote a JavaScript tutorial on how to keep the top level menu item selected when hovering over a drop down menu. Since then I’ve become a strong user and proponent of the JavaScript library jQuery. Not only is it easy to use, it also can help simplify your code-base very significantly. I’ve explained the updated code below. As you can see, it is much simpler.

Read full entry...

Pure CSS-based drop-down menus are a great thing, if for no other reason than their sheer simplicity and flexibility. However, they have two main drawbacks.

1. They don’t work in Internet Explorer 6 due to the browser’s poor support for the :hover pseudo-class.
2. When the mouse cursor is over a drop-down, the top level navigation item does not stay highlighted under most conditions.

Fortunately, both problems can be solved with some simple JavaScript. The first problem is easily corrected with the excellent Son of SuckerFish drop-down code. The second problem can be solved using the equally small amount of code described below.

The best part of this code its use of DOM hooks in your XHTML document to add the functionality making it self-contained and allowing full separation of content and design.

For the sake of simplicity, and reducing the number of called functions, I’ve combined the SuckerFish JavaScript with my own.

• View this code in action
• View complete code

Read full entry...

Whenever linking on the web, it is important to let the user know exactly where the link leads, especially if opening a new window or the linked item requires a plug-in or external software. For example, if linking to a PDF a small icon can provide a good hint of where the link leads. Unfortunately, manually adding icons to every link through a site can be quite laborious. This is where JavaScript comes in. With few lines of simple code we can automatically add icons to every link on a page.

• View this code in action
• Download this code (ZIP)
• View complete code

Read full entry...