Double Bar Menu

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 navigation 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.

The first step in adding a double bar menu to your web page is to write the HTML for the menus. As a navigation menu is basically a list of links, that's how we will code it in our HTML.

Here is my sample HTML for the menu. You can of course add as many more menu entries to each bar as you need and add additional versions of the second bar for each additional entry in the top bar. You will also need to change each of the links to actually point to the appropriate web page. In the case of the links in the top bar you will want to point them to pages that will provide access to the pages in the second bar menus for those of your visitors with JavaScript disabled.

<div id="nav">
<li id="menu1"><a href="#">Option One</a></li>
<li id="menu2"><a href="#">Option Two</a></li>
<ul id="n1"><li><a href="#">Option 1A</a></li>
<li><a href="#">Option 1B</a></li>
<li><a href="#">Option 1C</a></li>
<ul id="n2"><li><a href="#">Option 2A</a></li>
<li><a href="#">Option 2B</a></li>
<li><a href="#">Option 2C</a></li>

Note that the div wrapping the entire menu must have an id of nav in order for the menu to be styled correctly. The li tags in the first menu must have ids of menu1, menu2 etc with the corresponding ul tags for the alternate second bar menus having ids of n1, n2 etc where the numbers match between the entries so that the JavaScript knows which menu belongs to which option. The div around all the second level menus is also required for the stylesheet to work correctly.

With an operational navigation menu in our page, the next step in making it into a double bar menu is to apply some styles to the menu in order to make the entries actually appear as a bar across the page.

To do this the first step is to copy the following stylesheet code and save it as bmenu.css.

body {margin:0; padding:0;}
#nav ul {margin:0; padding:0;list-style: none;
position:absolute; border: 1px solid #ccc;
background-color:#99f; width:100%;}
#nav li {float: left; width: 10em; height:1.2em;}
#nav li a {color:#fff; text-decoration:none;}
#nav div {position:relative; top:1.3em; height:2em;}
#nav div ul {display:none;}

Next you need to modify this code so the menu looks the way you want. Those things that you can safely change are the border, background-color, color, and the width of the li. You should leave the rest of the code alone or the menu will not display properly as a bar across the page.

To apply this stylesheet to the menu we link it into the head of our web page.

<link rel="stylesheet" href="bmenu.css" type="text/css" />

Our menu should now appear as a single bar across the page with a gap under it. The entries should be functional to take people to the pages that you want them to see if they have JavaScript disabled.

With the HTML and stylesheet code in place we have a single bar menu appearing across our page with a gap under it. To convert this into the double bar menu that was our original goal we need to add the JavaScript that will display the appropriate second bar when an entry in that first bar is selected. To do this save the following JavaScript code as bmenu.js.


Now all that remains is to link the JavaScript into the web page. This particular script has been written in such a way that the script needs to be called from the page after the menu has been loaded and so the following script tag needs to be included in the body of the page below where the HTML for the menu appears. Immediately before the </body> tag is probably the best place for it.

<script type="text/javascript" src="bmenu.js"></script>

Now your single menu bar should function differently than it did before you added the JavaScript. Instead of each link opening a new page it should display the appropriate second level menu in the space below the first menu bar and the links on that menu should work to take you to the appropriate pages.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow