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:

 

ProductsServicesFun StuffAbout UsContacts & Directions

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.


Thank you, Steve.


This is an excellent book for JavaScript and DHTML developers.

Custom Search

Last updated Jul 19, 2011

Simple website navigation bar navbar, Simple DHTML navbar example, Simple JavaScript Nav Bar, DHTML Navigation Bar, Simple Web site Navigation Bar, javascript navigation bar, Simple DHTML Nav Bar, low VOC paint, Simple JavaScript Menus, Simple DHTML Menus, cross browser nav bar, simple navigation dhtml example, simple html nav bar, simple dropdown menus, How to get rich, javascript navagation bar, simple dhtml menus, dhtml navagation bar, dhtml drop down menus, simple website navbar, free javascript dhtml navigation bar, simple navigation bar, simple drop down css menus, simple drop down menus, simple css menus, auto insurance, lower car insurance, lower auto insurance, car insurance