How To Build A Simple jQuery Horizontal Drop Down Menu

Having a Drop Down Menu is good for hiding unnecessary navigation links when you do not need them. It helps to keep the web page clean and easy to navigate. It also enhanced the user experience when they are trying to locate certain information within the website. There are a lot of ways of creating drop down menu and there are also many different type of drop down menus around. If you have noticed a Vertical Drop Down Menu is more commonly used compare to a horizontal drop down menu.

From the previous How To Create a Lightbox Header for a Traditional Automobile Shop tutorial you will find that there is a Horizontal Drop Down Menu required, so in this article I will be showing you how to create a Simple Horizontal Drop Down Menu. For this tutorial, I will try to keep it simple and just focus on the Horizontal Drop Down Menu, some of the other elements like the button link reflection and the font I will leave it for future tutorial.

[tut demo=”https://onextrapixel.com/examples/horizontal-drop-down-menu/” download=”https://onextrapixel.com/examples/horizontal-drop-down-menu/horizontal-drop-down-menu.zip”]

1. The Navigation Background Image

We will start off by cropping the background image, select the full height of the navigation background and for the width, 5px will be good enough for us to do a CSS repeat-x.

2. The Dotted Right Border

For the main menu and the drop down menu, both right dotted borders are not similar, therefore we have to crop both dotted border and saves it as image.

3. Create The HTML Markup

Once we have prepared the images for the horizontal drop down menu, we will create the HTML Markup as follow.

<ul id="ddmenu">
	<li><a href="#">Services</a>
		<ul>
			<li><a href="#">Panel Beating</a></li>
			<li><a href="#">Insurance Claim</a></li>
			<li><a href="#">Spray Painting</a></li>
			<li><a href="#">Engine Servicing</a></li>
			<li><a href="#">Car Inspection</a></li>
		</ul>
				
	</li>
	<li><a href="#">Gallery</a>
		<ul>
			<li><a href="#">Work Place</a></li>
			<li><a href="#">Our Cars</a></li>
			<li><a href="#">Our Staff</a></li>
			<li><a href="#">Special Events</a></li>
		</ul>
	</li>
	<li><a href="#">Contact Us</a>
		<ul>
			<li><a href="#">Enquiry</a></li>
			<li><a href="#">Feedback</a></li>
		</ul>
	</li>
	<li><a href="#">Home</a></li>
</ul>		

As you can see under each parent li tag, it holds a list of sub li tags which will be the list of drop down links.

4. The jQuery Drop Down Menu

Now the HTML markup is ready, we will move on to the jQuery. For this tutorial, I will be using this jQuery Simple Drop Down Menu Plugin from JavaScript Array. You can find out more on how this plugin work over at JavaScript Array.

// <![CDATA[
	var timeout    = 500;
	var closetimer = 0;
	var ddmenuitem = 0;
		
	function ddmenu_open(){
		ddmenu_canceltimer();
		   ddmenu_close();
		   ddmenuitem = $(this).find('ul').css('visibility', 'visible');
	}
		
	function ddmenu_close(){ 
		if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
	}
		
	function ddmenu_timer(){
		closetimer = window.setTimeout(ddmenu_close, timeout);
	}
		
	function ddmenu_canceltimer(){  
		if(closetimer){  
			window.clearTimeout(closetimer);
		        closetimer = null;
	}}
		
	$(document).ready(function(){  
		$('#ddmenu > li').bind('mouseover', ddmenu_open)
		$('#ddmenu > li').bind('mouseout',  ddmenu_timer)
	});
		
	document.onclick = ddmenu_close;
// ]]>  

5. The CSS For Horizontal Drop Down Menu

Finally, we come to the CSS for this drop down menu. Over at JavaScript Array, this plugin is showing a vertical drop down menu, but we will need to modify the CSS in order to make into a Horizontal Drop Down Menu.

/*Drop Down Menu Styles*/
#ddmenu {
	background:url(images/menubg.gif) repeat-x;
	margin: 0;
	padding: 0;
	height:43px;
	width:700px;
}
	
#ddmenu li {	
	float: left;
	list-style: none;
	font: 11px Tahoma, Arial;
}

#ddmenu li a {	
	background:url(images/top-dotted.gif) right no-repeat;
	display: block;
	padding: 5px 12px;
	text-decoration: none;
	width: 70px;
	color: #fff;
	text-transform:uppercase;
	white-space: nowrap;
	text-align:center;
}

#ddmenu li a:hover {	
	background: #000 url(images/top-dotted.gif) right no-repeat;
}
	
#ddmenu li ul {	
	margin: 3px 0 0 10px;
	padding: 0;
	position: absolute;
	visibility: hidden;
	width:600px;
}

#ddmenu li ul li {	
	display:inline;
}

#ddmenu li ul li a {
	width: auto;	
	background: url(images/bottom-dotted.gif) right no-repeat;
	display: inline;
	color: #d9d9d9; 
	font-size: 10px;
	padding: 2px 10px;
}

#ddmenu li ul li a:hover {	
	background: #000 url(images/bottom-dotted.gif) right no-repeat;
	padding: 2px 10px;
}

Ultimately from the CSS over at JavaScript Array, you just have removed the float:none; at #ddmenu li ul li so that the float will be apply and add the display: inline; to #ddmenu li ul li a so that each li will be inline.

[tut demo=”https://onextrapixel.com/examples/horizontal-drop-down-menu/” download=”https://onextrapixel.com/examples/horizontal-drop-down-menu/horizontal-drop-down-menu.zip”]

Conclusion

One important pointer to take note, in order for this horizontal drop down menu to work correctly in Internet Explorer 6 (IE 6), you will need to give a fixed width at #ddmenu li ul, so that the unordered list will have enough width to hold the horizontal drop down list in IE 6.