Enhanced Suckerfish Menu

2. HTML

The first thing that you need to do to add my enhanced suckerfish menu to your site is to set up the HTML for the menu. A menu is a type of list so the correct way to define it in HTML is as a list. To handle the two or three levels in our menu we'll nest lists inside of lists to correctly define the structure of our menu.

Here's the HTML from the sample menu.

As you can see this menu is not greatly different from being just ordinary unordered lists and in fact in browswers that don't support CSS that is exactly what will be displayed allowing your site to be easily navigated just by clicking the appropriate link in the list. Of curse in that case they wont see the fancy dropsown menus but the important thing is that the menu will still be usable.

The differences that allow this to be converted into a menu are highlighted in bold in the above code. Where more than one instance occurs I have just highlighted the first one and the same obviously applies to all of them.

• the top level of the list is given an id of nav which is what allows the stylesheet and Javascript to apply specifically to our navigation menu to convert it into a dropdown menu.
• All of the entries in the top level list are links. You need to change each of these to link to pages that display all of the links in the lists contained within them so that Internet Explorer users with Javascript turned off (or who are using antiquated versions such as IE4 win or IE5 Mac) will have a way to access the menus since only the main menu bar will display for them.
• All of the second and third level menu entries must also be links except for those second level entries that have a third level within them. Since we already know that the menu is functional to open up the second level it will be equally functional for opening up the third level. This will also allow us to distinguish between second level entries that are direct links and those that open up a third level menu.
• My version of the menu has an empty div immediately following the menu. As my version of the menu stays put as the page is scrolled this div will make a space at the top of the page so that none of the page content ends up hidden behind the menu where it can't be seen at all.

To create your own HTML for your menu simply set up nested unordered lists like this specifying your own text for the menu entries. Of course you will also need to replace all of the # with the actual addresses of the pages that you want the various menu entries to link to so as to make your menu functional rather than merely being a demonstration of the concept.

Once you have the menu added to your page as nested lists it is time to add the stylesheet that will convert it into a functioning dropdown menu in most browsers.