Create an Attractive jQuery Menu with Fadein and Fadeout Effect

Written by Kevin Liew on 24 Jul 2009
369,754 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
Angel Medina 15 years ago
very nice, I\\'ve looking for this tut for months. keep up the good work!
Reply
kevin Admin 15 years ago
jack: hmmm, that's a very interesting question.
However, I did a quick search on google. You're lucky! They do have a plugin for it, I haven't tried it out, but do let me know if it works!

http://remysharp.com/2008/02/25/visited-plugin/
Reply
jack 15 years ago
i someone can help me? how to use in this fadein/out navigation a:visited function? selected class doesn't work as a a: visited.

Reply
jack 15 years ago
ok, thanks for help kevin, i have just add \\'class=\\"selected\\"\\' to link and now will be a:visited effect, its truelly great site many amazing jquery plugs , sometimes i say WOW :), one more time thanks for try to help me (even if not it was about it ;) , heh), I am greeting
Reply
krupnikas 15 years ago
How can i manade to control speed of animation?
Also is there a possibility to make like in this \\"Dragon inc\\" when you mouse over and then try to select other button but there is no need for all fade in and out animation...
Reply
Protomn 14 years ago
Works great in IE6!
Reply
Cinq 14 years ago
You forgot a callback function !
When I hover back and forth a little fast, or just on and off again it\'ll keep going on and off for a long time.

With the callback it\'ll stop fadeing in as soon as the mouse is out again :)
Reply
Jonath Lee 14 years ago
As Cinq mentioned earlier, it really need to add in the callback function. Can anyone show me how please?
Reply
kevin Admin 14 years ago
hi, you call add stop() to it,

$(this).stop().children(\'div\').fadeOut(\'1000\');
Reply
Jonath Lee 14 years ago
Thanks Kevin for your reply. But however, it seems didn\'t work for me...When I added the .stop() the button still glow based on how many time I hover it.
Reply
WEbRISES 14 years ago
Great tut!! Really!! But if you tried, you see that when you select a \"li\" element it change to class \"selected\", but when you click another \"li\" the first \"selected\" doesn\'t return as the original.

To adjust this, just add this where it calls
//Add selected class if user clicked on it

$(this).addClass(\'selected\')
.siblings(\'#navMenuli\').removeClass(\'selected\');

Done!!
Thanks
Reply
RD 13 years ago
This does not work for me. De text below becomes blue.. Am I forgetting to close a tag?
Reply
RD 13 years ago
Oww it works now thanx a lot. and many thanx to the writer of the tut. i have something like this now
Reply
Daniel 14 years ago
Very nice tutorial.. ive started off with mootools, and i find i way to hard to get started with. So now im looking for nice beginner Jquery tuts.. and this looks awsome, Nice effect, short script :) nice.
Reply
Jan Kovařík 14 years ago
Just great, thank you for the excellent tutorial. I have one problem ... Can I change the color of the link (as slowly as the background)?
Reply