Create an Attractive jQuery Menu with Fadein and Fadeout Effect

Written by Kevin Liew on 24 Jul 2009
357,772 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
Rocket Man 10 years ago
Hi!
This is great code but one significant problem: most menus are centred on the web page, where this is left-justified. I am only 'intermediate' with CSS and have tried for hours to centre the thing but it refuses to budge. Is there any way to centre this, and could you perhaps show & tell?
Otherwise this is damn near perfect!

Thank you Kevin!!
Reply
Kevin Liew Admin 10 years ago
Yes you can. In CSS, set the width for #navMenu. Then set the margin to margin:0 auto;
Reply
Brandon 10 years ago
Thanks for a great tutorial i was using a similar navigation but came across yours i liked it so much i switched mine. My issue is im great with the coding but lack at the graphic end of it i tried to recreate the images used with a color that matches my color scheme, but it just looks terrible. Any way you could include a tutorial for the images?
Reply
Kevin Liew Admin 10 years ago
Hi Brandon, unfortunately, I can't make a tutorial for it, but you can try one of there navigation menu design:
http://favbulous.com/ui-nav
Reply
Brandon 10 years ago
Thanks Kevin for the link. Some nice stuff there. As it turns out i figured out how to change the color. I just added a new layer filled it in with the color i wanted from my color scheme and changed the blending mode to color. Thanks again for the wonderful tutorial.
Reply
Kevin Liew Admin 10 years ago
Cool, that's a clever technique :)
Reply
Amit Kumar 10 years ago
Add a text-decoration: none for the link. Makes it look more aesthetic. Otherwise, a job well done. Thanks!
Reply
oskar 10 years ago
Hi, At firs sorry for my bad English :-) Your menu is fantastic, but I have a question. Can I use it for commercial sites?
Reply
Kevin Liew Admin 10 years ago
Yes, go ahead and use it in wherever you want. :)
Reply
Lizzie 10 years ago
Great script!

I've come to a problem though.. I'm using PNG images, so the background is transparant. I use this because I have a background-image on my site.

However, when I open the website in IE, and when I mouseover the images, a black border appears and goes away again. Is this because of the use of PNG images? And is there any solution for this?
Reply
Kevin Liew Admin 10 years ago
You're not using IE6 right? Otherwise it should be fine.

Line 34, and 45 of the CSS, try putting border:0;
Reply
Ansurie Naidoo 10 years ago
How do you changes the text color on hover
Reply
Kevin Liew Admin 10 years ago
In the CSS:

#navMenu li .hover {
......
......
color: #f00;
}
Reply
Tomas 10 years ago
if you want to remove the class so that only one option is highlighted when clicked just add the if statement in the click-function below......

$(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('500');
},
//Mouseout, fadeOut the hover class
function() {
$(this).children('div').stop(true, true).fadeOut('500');
}).click (function () {
if( $('#navMenu li').hasClass('selected') ){
$('#navMenu li').removeClass('selected');
}
//Add selected class if user clicked on it
$(this).addClass('selected');
});
});
Reply
Amy 10 years ago
Is there a way of making the menu vertical? what would I have to change to make it vertical? I would really appreciate it :) also what browsers is this menu compatible with,is it also compatible with mobile internet? thanks a lot :)
Reply
Kevin Liew Admin 10 years ago
Remove float:left from #navMenu li
Reply
Linda Eriksson 10 years ago
Hi! Great tutorial! I just have a question. I'm making a menu with a click function, and the fadeIn works fins, but I can't make the fadeOut to work properly. I wrote it like this:

$("#menu-toggle").click(
function() {
$("#access").stop(true, true).fadeIn("fast");
},

function() {
$("#access").stop(true, true).fadeOut("fast");

});

You can also see it on my test site here: http://test.syndrommedia.se/

Can u see what I'm doing wrong?

Thanks!
Reply
fav 9 years ago
helo.. i want to remove the underlines from the text ....please help me out
Reply
Qasim 9 years ago
I want to apply this on a Drupal 7 Navigation bar it works, but when I hover on the links it doesn't go to the links since it is overriding the link with a new div and giving it a class of hover is there a way or does anybody know how to get it work and make the jquery work :)
Reply
Kevin Liew Admin 9 years ago
Hi Qasim, it should work alright because the div appear under the anchor tag.
Reply
Elmer 9 years ago
Is there a way to make the entire menu fade in/out? If I try a javascript method of $('#navMenu') fading in/out, the fade-out works the first time, but it fails to fade-in.
Reply
Jack 9 years ago
Hi
Amazing tutorials,Now this is my favorite –jQuery tutorials. Thanks

http://pluskb.com
Reply