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

  • Tips For How to Stain Concrete Floors
    1

    You don't always have to tile, carpet, or hardwood your floors. The new thing is to just stain the concrete that's already there. It's a lot of work, but if done properly, your home will look gorgeous. If you're...

  • How to Get Rid of Mice In and Around The House?
    5

    Until this year, the only time that I've had mice or rats in the house were when my daughter had pet mice and rats, and one of those times we did have one loose in the house. (Science fair project got loose.) Anyway,...

  • How to Build Wooden Roof Trusses
    23

    You may refer to a truss as the rafter, but it's basically the skeleton of the roof, carrying the weight of the frame and supporting the walls of the building. Trusses are very important to preventing the walls from...


Click to Rate This Article
working