*
Simple DHTML navigation bar example with drop down menus
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 menu and navigation bar example code for any purpose.
*Also feel free to put the 'Peace Prosperity Sanity' banner image (top of this page) on your site or blog, as long as the banner links to http://www.cafepress.com/votesmart .
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. As usual, there are no implied or explicit warranties on any of this: If you're putting these DHTML nav bars or menus on a commercial site, you'll probably want to do the usual testing across browsers. (Sorry, we don't have bandwidth to offer tech support on this.)
Last updated May 22, 2008