Simple DHTML Menus and Navigation Bar Example

 

Here is a relatively simple way to implement a fast, good looking Website navbar, like this one. Roll your mouse over the titles to see submenus:

To see the code for this navigation bar, just use your browser to view this page's source and look for the section that starts with the comment "#### Navigation Bar ####".

You'll see that the code makes reference to one external .css file, which you can view by clicking here; and to one external javascript file, which you can view by clicking here (with a couple simple functions for showing and hiding the menus).

 

Of course you'll want to edit the names of menu titles and submenus to reflect your site's layout. That may require adjusting the widths and horizontal positions of titles and submenus. See the comments for how to do this in the .css file, below the #t5 declaration.

In the HTML you'll also want to replace each "placeholder.html" URL with the URL for whichever page you want the user to get to when they click the corresponding menu title or item.

 

Generally, website designers want the nav bar to appear in the same place on every page of the site. To avoid having to make changes on every page whenever a nav bar element changes, web site producers tend to put the nav bar code in its own navbar.html file, and then use "Server Side Includes" to pull that file's code into each page.

 

Feel free to use this example code for any purpose.

 

As usual, there are no implied or explicit warranties on any of this: If you're putting it on a commercial site, you'll probably want to do the usual testing across browsers... But this nav bar approach has worked well for me in a couple projects, across the fairly wide range of browsers and operating systems we tested. (Sorry, I don't have bandwidth to offer tech support.)

 

Last updated April 2, 2008