Javascript – Drop Down Menu

As requested by Andrew. Here is an example on creating a Drop Down Menu using Javascript and CSS.
Reference: Simple Drop-Down Menu v2.0

1. Created the html.css

#sddm
{	margin: 0;
	padding: 0;
	z-index: 30}

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

#sddm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 60px;
	background: #5970B2;
	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: #EAEBD8;
	border: 1px solid #5970B2}

	#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: #2875DE;
		font: 11px arial}

	#sddm div a:hover
	{	background: #49A3FF;
		color: #FFF}

2. Create the menu.html

<head>
	<link rel="stylesheet" type="text/css" href="menu.css" />
	<script type="text/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>
</head>
<body>
	<ul id="sddm">
		<li><a href="#" 
			onmouseover="mopen('m1')" 
			onmouseout="mclosetime()">Home</a>
			<div id="m1" 
				onmouseover="mcancelclosetime()" 
				onmouseout="mclosetime()">
			<a href="#">HTML Drop Down</a>
			<a href="#">DHTML Menu</a>
			<a href="#">JavaScript DropDown</a>
			<a href="#">Cascading Menu</a>
			<a href="#">CSS Horizontal Menu</a>
			</div>
		</li>
		<li><a href="#" 
			onmouseover="mopen('m2')" 
			onmouseout="mclosetime()">Download</a>
			<div id="m2" 
				onmouseover="mcancelclosetime()" 
				onmouseout="mclosetime()">
			<a href="#">ASP Dropdown</a>
			<a href="#">Pulldown menu</a>
			<a href="#">AJAX Drop Submenu</a>
			<a href="#">DIV Cascading Menu</a>
			</div>
		</li>
		<li><a href="#">Order</a></li>
		<li><a href="#">Help</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	<div style="clear:both"></div>
</body>

3. Deploy them to Apache and try your Drop Down Menu

Done =)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.