Enhanced Suckerfish Menu

1. Introduction and Sample

The "Suckerfish" Dropdown Menu introduced a method of creating dropdown menus that could be created using just HTML and stylesheet commands. A small amount of Javascript was required to overcome a lack of support for CSS in Internet Explorer and it had problems in many browsers but it was a step in the right direction.

The "Son of Suckerfish" Menu introduced modifications to the suckerfish menu to fix the stylesheet so that it would work in more browsers and to correct the Javascript to use proper feature sensing rather than running in more browsers than it should have. It also took into account accessibility and what would happen in IE if Javascript was disabled as well as adding support for multi-level menus.

Well now I have created my own version of the suckerfish menu that further enhances the menu using Javascript (what else!).

My version of the Suckerfish menu will display as a list of links in browsers such as Netscape 4 that don't properly support CSS. In Internet Explorer with Javascript disabled it will just display the main menu bar which should be set up with links to pages where the sub-menus can be easily accessed (so as to still provide full access to all the pages). As with son of suckerfish the sub-menus are just moved off of the page rather than being hidden so web readers can still access all of the links. Where my version differs is that the menu will remain visible in the browser window and the page content will scroll behind it (only where Javascript is enabled for IE6 and earlier). Of course the usual problem of it disappearing behind select lists in Internet Explorer, iframes in Opera, and Flash in all browsers will still occur but since you can scroll the page to move them off of the menu the problem of browsers mistreating those page elements will not be as great.

Take a look at this sample menu to see how the menu works. You may want to look at it in different browsers and with Javascript or CSS disabled to see how it handles the different situations.

If this is the sort of menu that you want to add to your site then the first step is to set up the HTML.