How To Build A Simple jQuery Horizontal Drop Down Menu

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.

How To Build A Simple jQuery Horizontal Drop Down Menu

[tut demo=”http://www.onextrapixel.com/examples/horizontal-drop-down-menu/” download=”http://www.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.

Drop Down Menu Navigation Background

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.

Drop Down Dotted Right Border

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=”http://www.onextrapixel.com/examples/horizontal-drop-down-menu/” download=”http://www.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.

Comments

    • yoxx,
    • August 4, 2009
    / Reply

    great tips…

    • Gabor,
    • September 30, 2009
    / Reply

    1. In this example the submenus begin under the main menus item.

    So the submenu items of the rightmost mainmenu can consume the least place compare to the leftmost mainmenu.

    How can we achive, that all submenu items begins at the left margin.

    2. How can I achieve, the choosen menuitem doesn’t disapear, when I move the cursor off. Of course, in that case I would implement the menu on the master page, and have to rewrite the javascript library too.

    Thanks in advance

    Gabor

  1. / Reply

    Great tutorial, thanks. I’ve been looking for a good menu like this but there aren’t that many jQuery ones available it seems.

    One problem I did run into that I have been trying to solve is what happens when your top level menu ends on the very right of your layout, and you have multiple menu items?

    Rather than moving more to the left it continues on to the right beyond the edges of the html. I haven’t figured out a way to set this so it doesn’t. Negative margins somewhere inline maybe, not sure.

    Any ideas?
    You can see my layout here:
    http://www.limostar.com/beta

    Thanks!

  2. / Reply

    I was able to mostly solve my problem by adding negative left margins to the submenu UL

    ie ul style=”margin-left: -215px;”
    etc

    Hope that helps,
    -Kevin

  3. / Reply

    Is it possible to to make te first item submenu visible by default?

    • gamez,
    • October 5, 2010
    / Reply

    Hi: when I chose a menu, How I can to make “activated” the menu and submenu selected?
    Thanks for this tutorial, is very good.

  4. / Reply

    Hi, this looks to be a perfect example – simple and clean. How would I tweak this so the nav items (top level and dropdowns) always center in page and the background bars/graphics go full width?

    Also to fully utilise the jquery it would be nice to have a fade or slide effect on the dropdowns, no?

    Thanks!

    • srini,
    • December 19, 2011
    / Reply

    this is perfect… so easy and customizable…. gracious!!

    • deep4ut,
    • December 21, 2011
    / Reply

    jquery again rocks

  5. / Reply

    can i change the color?

  6. / Reply

    Hi!
    Great menu, but doesn’t work correctly on ipad and smartphone android.
    Is there a version that can work correctly on all devices?
    Thanks!
    Bye

    • rayan,
    • April 15, 2013
    / Reply

    How to create a dropdown menu like this in wordpress?

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.