Company & Industry Related News

jQuery Hover Menu Tutorial

So you want to learn how to use jQuery to make a hover menu.  Many people do; and more over, there are tons of plugins out there that will easily help one accomplish this.  In this approach, I’d like to guide you through the process of making a small custom animated hover menu from scratch.  Upon completion, you will have a clearer understanding of the jQuery library, and how to use it to create even more complex hover effects.  You will also understand how to insert elements into the DOM and why using a JavaScript libraries’ loading event is superior to using the generic window.onload event.  Please refer to blackarrowsoundonline.com for a working example of this menu. Good Stuff!!  Let’s get started…

Building the Menu

First things first.  Include the necessary files in the header section of your document.  The code for your header should look something like this:

<!-- Menu Includes -->
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="default.js"></script>
	<link rel="stylesheet" href="menu.css" type="text/css" />
<!-- End Menu Includes -->

Simple enough right?  As always please make sure that your script are declared in THIS order.  The stylesheet declaration can go anywhere but, if the scripts do not appear in the necessary sequential order, this process will not work.

Step 1 – Create the XHTML

Now that we have all our scripts in place, we need to actually build the menu.  In the example in the graphic above, the menu code looks as such:

<div id="nav" class="left">
	<ul>
		<li><a href="/news/" title="News">News</a></li>
		<li><a href="/about/" title="About Us">About Us</a></li>
		<li><a href="/events/" title="Calendar">Calendar</a></li>
		<li><a href="/bands/" title="Bands">Bands</a></li>
		<li><a href="/venues/" title="Venues">Venues</a></li>
		<li><a href="/services/" title="Services">Services</a></li>
		<li><a href="/photos/" title="Photos">Photos</a></li>
	</ul>
</div>

Another simple setup!  The menu is a simple unordered list.  Our desired effect could be accomplished using an ordered or definition list but, we’ll stick with the popular unordered list.

Step 2 – Create the JavaScript

This is where the magic happens (please no MTV Cribs references).  The code is ultra lightweight and because we’re using the jQuery Library, ultra efficient.  Let’s take a look at the code below.

jQuery(document).ready(function($){
	$('#nav ul li').prepend('<div class="menuslide"></div>');
	$('#nav ul li').hover(
		function() {
			$('div.menuslide', this).fadeIn(300);
		},
		function() {
			$('div.menuslide', this).fadeOut(300);
		}
	);
});

This probably deserves an explanation.  If you are unfamiliar with JavaScript libraries or jQuery, this code probably looks very foreign to you.  Either way, let’s step though this line by line.

Line 1 - The first thing we must ALWAYS do following modern web development techniques is to attach a load event to the XHTML page.  However we do not want to use a window.load event.  The reason for this is that window.load executes AFTER all images are loaded on the page.  This can be CRUCIAL with certain things.  So the fix is to use jQuery’s .ready event.  This will now execute all nested code inside the event BEFORE the images have loaded.  Another benefit using this technique is that we now have created a completely separate JavaScript layer apart from the main page.  We like to avoid putting JavaScript on any pages.  Sometimes there are scenarios where this is NOT the case but, we should do our best to avoid it at all costs.

Line 2 - This line of code adds some XHTML code to each one of our menus.  By doing this we have created a div inside of the li element.  This div will contain the graphic that will appear behind our menu text.

Lines 3-10 – This block of code is responsible for making our menu look awesome.  We start off by attaching a hover event to each one of our li menu items.  The hover event is capable of executing code when the user puts their mouse over the element AND when they move their mouse off the element.  The two nested functions handle the animations effects for both of the aforementioned events.  Be sure that you utilize the this keyword in your selector.  Otherwise the ENTIRE menu will end up being highlighted regardless of which menu item you are hovering over.

Step 3 – Adding in your CSS

Okay!  This is the last step and then we are finished!  Drop this CSS in your menu.css file to make all of this work the way it should.  It looks a little something like this:

#nav {
	width: 160px;
	height: 500px;
	background-image: url(images/bkg_page_left.jpg);
	background-repeat: no-repeat;
	background-position: 13px 0;
	color: #fff;
	text-align: right;
}
#nav ul {
	list-style: none;
	margin: 12px 0 0;
}

#nav ul li {
	display: block;
}

#nav ul li a {
	text-transform: uppercase;
	font-size: 24px;
	padding: 10px 30px 8px 0;
	margin: 0 0 30px;
	width: 130px;
	display: block;
	color: #fff;
	z-index: 20;
	position: relative;
}

.menuslide {
	position: absolute;
	display: none;
	width: 160px;
	height: 36px;
	background-image: url(images/bkg_menu.jpg);
	background-repeat: no-repeat;
	z-index: 1;
}

#nav {
	width: 160px;
	height: 500px;
	background-image: url(images/bkg_page_left.jpg);
	background-repeat: no-repeat;
	background-position: 13px 0;
	color: #fff;
	text-align: right;
}
#nav ul {
	list-style: none;
	margin: 12px 0 0;
}

#nav ul li {
	display: block;
}

#nav ul li a {
	text-transform: uppercase;
	font-size: 24px;
	padding: 10px 30px 8px 0;
	margin: 0 0 30px;
	width: 130px;
	display: block;
	color: #fff;
	z-index: 20;
	position: relative;
}

.menuslide {
	position: absolute;
	display: none;
	width: 160px;
	height: 36px;
	background-image: url(images/bkg_menu.jpg);
	background-repeat: no-repeat;
	z-index: 1;
}

There are several important things to notice here.  The first thing would be the CSS definitions for .menuslide.  We want display:none to keep the menu hover from displaying immediately.  Also note position:absolute.  This is set as such so that the background image appears directly behind out text.

Some of the code is part of the CSS of the actual site.  For a full working demonstration, please go to www.blackarrowsoundonline.com.

Conclusion

We now have some tools under our belt that will help us make a quick and pretty slick menu.  We accomplished this with some pretty standard XHTML, about 15 lines of JavaScript and some basic CSS classes.  I hope you can find this useful!

Leave a Reply