Javascript: Drop Down Menu List

I'm sure you have looked at other drop down menu options, using javascript. As you are full aware of the multiple flavors of javascript to produce a simple drop down menu list for your web page. The example I have here, is pretty basic, and should be easy to follow and modify for what you are want to use it for.

Included here, is the sample javascript for handling the menu, css for look and feel, and html for display and layout on your page.

CSS Example

Below is the CSS to control the look and feel of your drop down menu. Font size, font style, colors, width of menu. Place the follow css code between the <head></head> tags on your web page.

<style type="text/css">
#sddm
{	margin: 0;
	padding: 0;
	z-index: 30}

#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 12px arial}

#sddm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 160px;
	background: #666666;
	color: #FFF;
	text-align: center;
	text-decoration: none}

#sddm li a:hover
{	background: #49A3FF}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #e7e7e7;
	border: 1px solid #666666}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #000000;
		font: 11px arial}

	#sddm div a:hover
	{	background: #49A3FF;
		color: #FFF}
</style> 

Javascript Example

Below is the javascript example code for controlling the drop down menu list. Place the following javascript between the <head></head> tags of your web page. They can be placed below or above the css code.

<script language="JavaScript">
var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose; 

</SCRIPT>

HTML Example

Below is the <HTML> example for the items and sub items in your drop down menu. Please the HTML anywhere between the <body></body> tags of your web page.

<ul id="sddm">
    <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Home</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">About Us</a>
        <a href="#">Contact Us</a>
        </div>
    </li>
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Products</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">Men Apparel</a>
        <a href="#">Women Apparel</a>
        <a href="#">Kids</a>
        <a href="#">Household</a>
        </div>
    </li>
    <li><a href="#">Shop Now</a></li>
        
</ul>
<div style="clear:both"></div>

Summary

Just a neat little javascript to give your web page that drop down menu functionality.

More by this Author


Click to Rate This Article
working