CSS/JavaScript Drop Down Menu

Last Edited: 2009-04-15

A horizontal drop down menu script which uses Javascript and CSS. When the mouse pointer is moved over a link a further set of links is revealed.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>CSS/JavaScript Drop Down Menu Script</title> <meta name="title" content="CSS/JavaScript Drop Down Menu Script" /> <meta name="author" content="Programmer Central" /> <meta http-equiv="Content-Type" content="text/html; charset='UTF-8'" /> <script type="text/javascript"> var displayed = null; var LINK = "_link"; (function() { if (window.addEventListener) { window.addEventListener("load", setup_drop_down_menu, false); } else { window.attachEvent("onload", setup_drop_down_menu); } })(); function setup_drop_down_menu() { var divs = document.getElementById("navigation_menu").getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { setup_link(divs[i].id); } } function setup_link(div_id) { var link = document.getElementById(div_id + LINK); link.onmousemove = function(){display_menu(div_id);}; link.onmouseout = function(){hide_displayed_menu();} link.onclick = function(){hide_displayed_menu();} } function hide_displayed_menu() { if (displayed) { displayed.style.display = 'none'; displayed = null; } } function display_menu(id) { hide_displayed_menu(); displayed = document.getElementById(id); displayed.style.display = 'block'; displayed.onmouseover = function(){display_menu(id);}; displayed.onmouseout = function(){hide_displayed_menu();}; displayed.onclick = function(){hide_displayed_menu();}; } </script> <style type="text/css"> .clearer { clear: both; } #navigation_menu { background-color: #EAEAEA; color: black; height: 35px; } #navigation_menu ul { margin: 0%; padding: 0%; list-style-type: none; } #navigation_menu ul a { background-color: #EAEAEA; color: black; line-height: 35px; padding: 0px 20px 0px 20px; text-decoration: none; display: block; } #navigation_menu ul a:hover { text-decoration: underline; } #navigation_menu ul div { position: absolute; display: none; z-index: 1000; } #navigation_menu ul li { float: left; } </style> </head> <body> <div id="navigation_menu"> <ul> <li>  <a href="#" id="menu_1_link">No Drop Down Link</a> <div id="menu_1"></div> </li> <li> <a href="#" id="menu_2_link">Link</a> <div id="menu_2"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> </li> <li> <a href="#" id="menu_3_link">Link</a> <div id="menu_3"> <a href="#">Link 1</a> </div> </li> <li> <a href="#" id="menu_4_link">Link</a> <div id="menu_4"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Another Link</a> </div> </li> <li> <a href="#" id="menu_5_link">Link</a> <div id="menu_5"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> </div> </li> </ul> </div> <div class="clearer"></div> <p>Line 1.</p> <p>Line 2.</p> <p>Line 3.</p> <p>Line 4.</p> <p>Line 5.</p> <p>Line 6.</p> </body> </html>

The preview will open up in a new window.

Information

If you use this script on any of your web pages then please provide a link back to us.

More free JavaScript Navigation scripts.

Rate This Script

Rate this script!

Rate This Script
	Excellent!
	Very Good
	Good
	Fair
	Poor

Be Sure To Check Out These Scripts
CSS/JavaScript Drop Down Menu	A horizontal drop down menu script which uses Javascript and CSS. When the mouse pointer is moved over a link a further set of links is revealed.
PHP Directory List	Displays a list of all files and directories in a directory.

Top of Page

Programmer Central

Free Web Related Scripts, Tutorials, and Generators.

Search

Links

Font Size

Random Script

Support Us

CSS/JavaScript Drop Down Menu

Code

Information

Rate This Script