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 ####".
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.
Thank you, Steve.
Last updated Jul 19, 2011