Double Bar Menu

2. HTML

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.

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 this in our page where we want the menu to appear our page is now usable even for those whose browsers cannot handle stylesheets even though the menu looks nothing like the actual bar menu that we want people to see. The next step is to add the stylesheet to make the menu actually appear as a bar across the page.