Tutorials

Create an Attractive jQuery Menu with Fadein and Fadeout Effect

Written by Kevin Liew on 24 Jul 2009
320,105 Views • Shares
110 comments

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.

Fade in menu Preview

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!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

110 comments
Bru 4 years ago
Can sub menus be added? Has this been tried? Thanks! Great stuff!
Reply
xevasz 4 years ago
I'm trying to install this on my wordpress theme no luck so far :/
Reply
Michael 4 years ago
Good article, but not many examples are here. If anybody needs AJAX jQuery menu, it can be found in this article: Good article, but not many examples are here. If anybody needs AJAX jQuery menu, it can be found in this article:
Reply
Donimic 4 years ago
Hey Kevin,
Thanks for the great tutorial! I actually incorporated this into my WordPress theme with custom menus and it works great. However, the one issue I'm running into is the sub menus and I was hoping you could offer some insight.

The sub menus are adopting the same overstate effect and height from the primary nav. I actually want the sub menus to be thinner and not have the cool Jquery effect. I've been toying around with this for some hours but then figured I'd ask the creator of the program to begin with :)

Thanks again for your help and time!

D
Reply
Advait Patel 3 years ago
Hello Friend,
I want time liner code with some example. Can you help me ?

tahnk you in advance.
Reply