Create an Attractive jQuery Menu with Fadein and Fadeout Effect

Written by Kevin Liew on 24 Jul 2009
354,857 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
piese auto ieftine 11 years ago
It's slightly harder to use, but the menus are excellent. The final result counts.
Reply
pariuri 11 years ago
Great Article!Thanks for sharing this information. I got a chance to know about this.
Reply
Piermont Web Design 11 years ago
Very useful and informative. Thanks!
Reply
Nathan Valentine 11 years ago
To prevent the continuous hover effect, add the stop() call to it, as Kevin mentioned, like so...$(this).children('div').stop(true, true).fadeIn('1000');$(this).children('div').stop(true, true).fadeOut('1000');
Reply
Nathan Valentine 11 years ago
Hey Kevin, awesome tutorial! I'm wondering...when I replace the hashes in the href of my html with my actual page links, the selected class no longer renders the selected image. I've tried googling some scripts, but nothing seems to work. Do you have any ideas?
Reply
RedLion 11 years ago
Well. I have an issue with transparent PNG in IE7. There is a nasty effect when the background image is appearing. Some kind of unwanted black borders appear around the transparent PNG image during the fading transition. Any ideas to resolve this?
Reply
inginer 11 years ago
Thanks !
Reply
dezmembrari auto 11 years ago
Thanks,it worth.A little bit hard to use it but it is great.
Reply
webthesurfi rugs webdesign 11 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" doesnt return as the original.
Reply
tea kettle 11 years ago
Thanks for this great tutorial on jQuery
Reply
lauren 11 years ago
So, what happens if javascript isnt turned on? I left my li:hover in my css as a fall back ... only issue is (even if I remove the class) there is a slight snapping occurring. Could it be the single background image for both states? Any ideas?
Reply
RedLion 11 years ago
For Incompetent Explorer, I have found a solution for transparent pngs. Yes this is a lazy one but it works...I simply detect the browser with jquery (if ($browser.msie){})
then I change the "fadeIn" and "fadeOut" effects by the "slideIn" and "slideOut" ones which don't make appearing the nasty black borders when fading.

This is not so nice, but for the menu I made, it works rather nicely. If people have other suggestions for this problem on Incompetent Explorer, feel free to share.


Reply
program tv 11 years ago
Hard to implement it but it worth and now I am very glad.
Reply