Vertical Description Menu

Last Edited: 2009-04-15

A vertical menu where a description of the links is displayed when the mouse is moved over them. The links are also highlighted as the mouse is moved over them.

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>Vertical Description Menu Script</title> <meta name="title" content="Vertical Description Menu Script" /> <meta name="author" content="Programmer Central" /> <meta http-equiv="Content-Type" content="text/html; charset='UTF-8'" /> <script type="text/javascript"> /* Update this array with the ids of the links in the menu being the array keys, and the array values being the messages to display. */ var messages = new Array(); messages["vd_menu_link_1"] = "Message 1"; messages["vd_menu_link_2"] = "Message 2"; messages["vd_menu_link_3"] = "Message 3"; messages["vd_menu_link_4"] = "Message 4"; var MENU_ID = "vd_menu"; var MENU_DESC_ID = "_description"; (function() { if (window.addEventListener) { window.addEventListener("load", setup_menu, false); } else { window.attachEvent("onload", setup_menu); } })(); function setup_menu() { var links = document.getElementById(MENU_ID).getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { setup_link(links[i]); } } function setup_link(link) { var desc_elem = document.getElementById(MENU_ID + MENU_DESC_ID); link.onmouseover = function(){display_message(desc_elem, messages[link.id]);}; link.onmouseout = function(){display_message(desc_elem, "");}; } function display_message(elem, message) { elem.innerHTML = message; } </script> <style type="text/css"> .vd_menu { text-align: center; border: 1px solid black; width: 250px; } .vd_menu a { text-decoration: none; display: block; background-color: #EAEAEA; color: black; border-top: 1px solid black; padding: 5px 30px 5px 30px; } .vd_menu p { display: block; background-color: #EAEAEA; color: black; border-top: 1px solid black; margin: 0%; padding: 0%; height: 75px; overflow: hidden; padding: 5px; } .vd_menu a:hover { text-decoration: underline; background-color: gray; color: #EAEAEA; } .vd_menu a:first-child { border-top: 0px; } </style> </head> <body> <div class="vd_menu" id="vd_menu"> <a href="#" id="vd_menu_link_1">Link 1</a> <a href="#" id="vd_menu_link_2">Link 2</a> <a href="#" id="vd_menu_link_3">Link 3</a> <a href="#" id="vd_menu_link_4">Link 4</a>  <p id="vd_menu_description"></p> </div> </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
	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

Vertical Description Menu

Code

Information

Rate This Script