JavaScript : Creating drop down menus

Creating drop down menus for your website can be a very simple, or a very difficult task, depending how you go about it. If you are using a scripting language such as PHP, there are open source solutions such as PHP Layers Menu.

If you are using a graphical editor or are building your website in pure HTML (no scripting language), you are going to have to get your hands dirty with a little javascript. Use the example code below to get started, you will have to modify the positions based on your application:

HTML

<body onLoad="start_focus()" onClick="hideNav2()">

<div id="nav">
	<a href="#" onMouseOver="showNav()">Menu 1</a>
</div>

<div id="nav2">
	<ul>
		<li><a href="#" onClick="hideNav()">Sub Menu Item 1</a></li>
		<li><a href="#" onClick="hideNav()">Sub Menu Item 2</a></li>
	</ul>
</div>


JavaScript

function showNav()
{
	obj = document.getElementById('nav2');
	obj.style.display = 'block';
	
	obj.style.left = (self.innerWidth / 2 - 270) + 'px';
	obj.style.top = '57px';
	
}

function hideNav()
{
	obj = document.getElementById('nav2');
	obj.style.display = 'none'; 
}

CSS

#nav2 { margin-left: 103px; display: none; position: absolute; z-index: 0; top: 0px; left: 0px; }
#nav2 ul { padding: 0; margin: 0; }
#nav2 li { display: block; list-style-type: none; border-top: 0; }
#nav2 li a { padding: 2px; }
#nav2 li a:hover { background-color: #e1d6b5; }

Need assistance with your project? Universal Web Services can help.
Contact us to request a quote.

Personal tools

JavaScript : Creating drop down menus