Chapter 4. Building an Interactive Navigation Menu

In 2003, an article published on A List Apart (http://alistapart.com) called Suckerfish Dropdowns showed how HTML and CSS alone (with just a little JavaScript help for IE 6) can be used to build a complex multilevel drop-down menu. The Suckerfish name derived from the gorgeously designed demo of the technique, which featured illustrations of remoras and sharksuckers. While useful, the original requires that the site visitors not move their mouse outside the menu area while navigating or the menu disappears. Over the years, the Suckerfish Dropdowns article has inspired a lot of spinoffs—Sons of Suckerfish, Improved Suckerfish, and so on—that attempt to address the shortcomings of the original. Because jQuery can make everything better, we'll build on this idea using the Superfish jQuery plugin to make the menu easier to use.

The developer of the Superfish plugin, Joel Birch, says that most support issues with...