Create an Attractive jQuery Menu with Fadein and Fadeout Effect

Written by Kevin Liew on 24 Jul 2009
354,859 Views • Tutorials

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
Daniel Maul 11 years ago
Please help me, i can't figure it out...
I've done as said, but it dosen't work...

Regards
Reply
kevin Admin 11 years ago
Hi daniel, have u included all the required file? is the demo zip file works for you?
Reply
Master of CSS 11 years ago
You need to use the .stop(); function, otherwise it'll look stupid when you hover over it a ton.
Reply
Dezmembrari Ford 11 years ago
nice tutroail thanks for it.Now I can make my own menu for my games site.
Reply
kevin Admin 11 years ago
Hi Nico, put it in this two line of codes:

$(this).stop(true, true).children('div').fadeIn('1000');

$(this).stop(true, true).children('div').fadeOut('1000');
Reply
Doug 10 years ago
Try the following, if Kevin's code doesn't work. And yes, you NEED this stop function. All you need to do is replace the original two lines with these lines.

$(this).children('div').stop(true, true).fadeIn('1000');
$(this).children('div').stop(true, true).fadeOut('1000');
Reply
Ricardo Zea 10 years ago
I would only use the stop in the fade out function. It makes the fading more 'friendly' (if you can call it that) if the user decides to hover in and out several times on an element.
Reply
Nico 11 years ago
Sorry, can sbd tell me where exactly I should use the ".stop();"-function (as "Master of CSS" mentioned)?
I'm a totally JS-Noob....
;)
Reply
biletul zilei 11 years ago
nice article!thanks for sharing
Reply
Dezmembrari auto 11 years ago
Thank you very much for this great resource.
Reply
Chris 11 years ago
this was perfect for what I was looking for, hower i wanted to use a different image for each of the li items. for example, a multi colored menu, or display a different saying underneath each menu item. any ideas? tried creating a class, but nothing was really happening with it
Reply
Alex C 11 years ago
Excellent example! I spent all morning trying to get this working and this saved my life :)

Thank you for taking the time to put this example together.
Reply
Ray 11 years ago
Does this Menu exist for Joomla???
Reply
Dic-Syen 11 years ago
Hi there, great tutorial but may I know is it possible to apply this effect on image besides navigation? Would really like this effect on y site's image. Thx.
Reply
MiKus (PL) 10 years ago
Try to change:
$('#navMenu li').append(...
to:
$('#navMenu li:not(.selected)').append(...
and when li have .seleted class on opening page, the selected option will be marked
Reply