Create an Attractive jQuery Menu with Fadein and Fadeout Effect

Written by Kevin Liew on 24 Jul 2009
354,865 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
Better Tomo. 12 years ago
Good tut.
But I want to add :
If the selected state can change flexible with the user clicking.
Reply
Web010 12 years ago
Great tutorial.
Thanks.
Reply
jzigbe 12 years ago
Nice!
Reply
Jasmin Halkić 12 years ago
Amazing!
Reply
Rick 12 years ago
I have been working on a side project where I wanted something similiar to this effect. Adding the child div was a real 'Ohhhhhh! that's how' moment for me.
thanks
Reply
Steven 12 years ago
Nice!thanks
Reply
Eric 12 years ago
KEVIN You are the man! You have now hit all of my suggestions! Big Thanks!
I can now dissect your tuts and finalize production of my site and get a better grip of jQuerys juicy whole grain goodness ;)
Thanks and I will shoot you more suggestions!
Reply
kevin Admin 12 years ago
Hi Eric! Thanks for ur tutorial ideas :)... you can give me more of that...!

The reason I used javascript to append the DIV is to keep the HTML simple.. :)

Yes, you can add the DIV by yourself, and remove the append code in the javascript.
Reply
Rich 12 years ago
Nice tut, helping me to learn a lot. One quick comment though, I'm not sure how you do this because I'm really new to this stuff but would it be possible to cancel the animations after the fadeout when you are no longer hovering? Meaning right now if you move quickly back and forth between two links a bunch of times and then stop on one it will continue to animate as many times as you hovered.

It would be nice if it just faded out once after you left the link.
Reply
kevin Admin 12 years ago
Hi Rich, you can use stop() to avoid it. Something like:
$(this).stop().children('div').fadeOut('1000');
Reply
Eric 12 years ago
Ok, it is 102 am, I just dissected the js code and CSS, a question has arisen.....Why is jQuery required to append these DIVs to the list times, can we not add these divisions in the HTML and achieve similar results? Or is this due to a browsers javascript being turned off? So, someone else that may be awake when reading my message, please enlighten me or just reach through the screen and wake my brain up!
Reply
Eric 12 years ago
Hey Kevin
Ok, I was wondering about the appending of tags like that with jQuery.
I have seen this quite a bit, where SPAN tags have been appended via jquery and div tags as well.
I have many more ideas and i will shoot them to ya
Reply
Rich 12 years ago
Aha, simple enough. Thanks for the reply!
Reply