Create an Attractive jQuery Menu with Fadein and Fadeout Effect

Introduction

I got this tutorial request from a reader, if you have any request at all, please contact me, give me some suggestions for the upcoming tutorial! :)

Apparently, I have seen this kind of menu before, in Dragon Interactive . During the implementation, I was having a bit of problem, I thought it's just a simple fadein and fadeout effect, but it actually required a lot of CSS works and the right images.

1. HTML

HTML is very simple, just a list of links. :)

<ul id="navMenu">
	<li><a href="#">Test 1</a></li>
	<li><a href="#">Test 2</a></li>
	<li><a href="#">Test 3</a></li>
	<li><a href="#">Test 4</a></li>
	<li><a href="#">Test 5</a></li>
	<li><a href="#">Test 6</a></li>
</ul>

2. CSS

CSS is little bit complicated this time, therefore, I have put a lot of comments. I hope it will explain everything you need to know.

body {
	background:#222;	
}

#navMenu {
	margin:0; 
	padding:0;
	list-style:none;	
	font-family:arial;
	text-align:center;
	line-height:60px;
}

	#navMenu li {
		float:left;	
		
		/* default background image	*/
		background:url(default.jpg) no-repeat center center;	
		
		/* width and height of the menu item */
		width:120px;							
		height:70px;
		
		/* simulate pixel perfect using border */
		border-left:1px solid #111;				
		border-right:1px solid #333;
		border-top:1px solid #555;
		border-bottom:1px solid #333;
		
		/* must set it as relative, because .hover class top and left with absolute position will be positioned according to li.	*/
		position:relative;			
	}

	#navMenu li a {
		/* z-index must be higher than .hover class */
		z-index:20;				
		
		/* display as block and set the height according to the height of the menu to make the whole LI clickable	*/
		display:block;	
		height:70px;
		position:relative;
		color:#777;
	}

 	#navMenu li .hover {
 		/* mouseover image	*/
		background:url(over.jpg) no-repeat center center;		

		/* must be postion absolute 	*/
		position:absolute;	
		
		/*	width, height, left and top to fill the whole LI item	*/
		width:120px;	
		height:70px;
		left:0; 
		top:0;	
		
		/* display under the Anchor tag	*/
		z-index:0;		
		
		/* hide it by default	*/
		display:none;	
	}	

	#navMenu li.selected {
		/* selected image	*/
		background:url(selected.jpg) no-repeat center center;	
	}

3. Javascript

We are using the jQuery built-in fade in and face out effect. First of all, we need to append the div.hover to the list. After that, just a normal mouse hover event with the fadein and fadeout transition.

	
$(document).ready(function () {

	//Append a div with hover class to all the LI
	$('#navMenu li').append('<div class="hover"><\/div>');


	$('#navMenu li').hover(
		
		//Mouseover, fadeIn the hidden hover class	
		function() {
			
			$(this).children('div').stop(true, true).fadeIn('1000');	
		
		}, 
	
		//Mouseout, fadeOut the hover class
		function() {
		
			$(this).children('div').stop(true, true).fadeOut('1000');	
		
	}).click (function () {
	
		//Add selected class if user clicked on it
		$(this).addClass('selected');
		
	});

});

Conclusion

This is it, I haven't tested it on IE6 (I don't have one :()... if you having problem with that, please let me know, hopefully I will able to find a way to solve it, or if you can come out with a solution that'd be highly appreaciated! :) Thanks.

Last but not least, I need your support :) If you like this article, please help me to promote it by adding this post to your bookmark. Or you can subscribe to my RSS for more jQuery tutorial and design inspiration posts! Thanks!

• TAGS:
• CSS
• HTML
• Javascript
• jQuery
• Tutorial