Double Bar Menu

4. JavaScript

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.

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.