Double Bar Menu
1. Introduction and Sample
Join the Discussion
More of this Feature
This version of the dual menu bar is completely unobtrusive in that there is absolutely no JavaScript within the menu itself, it is all at the very bottom of the page. We also cater for those with JavaScript disabled by only showing the main menu bar to those visitors and having those links take them to pages that provide the additional navigatin that they require.
The versions of the dual menu bar that display the second bar based on which element you hovered over last really annoy me because I often accidentally move the mouse over another entry in the top bar while moving to the entry I want in the second bar so this version of the dual menu bar script requires that you click on an entry in the top bar to change an entry in the second bar. That way you can move the mouse across other entries in the top bar to get to the second level entry you require.
Creating this script didn't work out quite the way I wanted because I was hoping to keep the second level menus within the corresponding top level menu just like the suckerfish menu system does. Unfortunately there wasn't any way I could find to do that and to create a dual bar menu that would display correctly in IE6 since to do that needs the menu bars to be defined as position:fixed which IE6 doesn't support. I have therefore done the next best thing with all of the menus being nested inside a div that isolates the stylesheet for the menu from the rest of the page and all the second level menus inside a second div so that the number of container divs corresponds to the level of the menu bar. Those entries in the top menu have ids of menu1, menu2 etc. while the corresponding second level menus have ids of n1, n2 etc. so that the number on the end of the ids matches the second level menu back to the corresponding top level entry.
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.
