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 IE6) could 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 visitor not move their mouse outside the menu area while navigating or the menu disappears. Over the years, the Suckerfish Dropdowns have inspired a lot of spinoffs — Son of Suckerfish, Improved Suckerfish, and so on that attempt to address the shortcomings of the original. Since 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 the plugin come from people not understanding the CSS for the menu. To be sure you have a firm grasp on the CSS, I highly recommend reading the original Suckerfish Dropdowns article on A List Apart at http://www.alistapart.com/articles/dropdowns.
To get started with this plugin, we'll build on a basic Suckerfish menu. Since that menu only requires CSS, we still get an interactive menu if we have JavaScript disabled. The menu is just improved for users with JavaScript enabled.
In this chapter, we'll learn the following topics:
- Using the Superfish jQuery plugin to create a horizontal drop-down menu
- Creating vertical flyout menu with the Superfish plugin
- Customizing the drop-down and flyout menus created with the Superfish plugin