Create an Attractive jQuery Menu with Fadein and Fadeout Effect

Create an Attractive jQuery Menu with Fadein and Fadeout Effect


Create an Attractive jQuery Menu with Fadein and Fadeout Effect
Demonstration Download

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('
'); $('#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!

Demonstration Download

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

110 comments

Amy
Wed, 14th March 2012
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
Wed, 21st March 2012
Remove float:left from #navMenu li
Reply
Linda Eriksson
Fri, 23rd March 2012
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
Wed, 16th May 2012
helo.. i want to remove the underlines from the text ....please help me out Reply
Qasim
Tue, 22nd May 2012
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
Tue, 22nd May 2012
Hi Qasim, it should work alright because the div appear under the anchor tag. Reply
Elmer
Fri, 8th June 2012
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
Sat, 12th January 2013
Hi
Amazing tutorials,Now this is my favorite –jQuery tutorials. Thanks

http://pluskb.com
Reply
Bru
Fri, 25th January 2013
Can sub menus be added? Has this been tried? Thanks! Great stuff! Reply
xevasz
Sat, 2nd February 2013
I'm trying to install this on my wordpress theme no luck so far :/ Reply
Michael
Wed, 17th April 2013
Good article, but not many examples are here. If anybody needs AJAX jQuery menu, it can be found in this article: Good article, but not many examples are here. If anybody needs AJAX jQuery menu, it can be found in this article: Reply
Donimic
Fri, 26th April 2013
Hey Kevin,
Thanks for the great tutorial! I actually incorporated this into my WordPress theme with custom menus and it works great. However, the one issue I'm running into is the sub menus and I was hoping you could offer some insight.

The sub menus are adopting the same overstate effect and height from the primary nav. I actually want the sub menus to be thinner and not have the cool Jquery effect. I've been toying around with this for some hours but then figured I'd ask the creator of the program to begin with :)

Thanks again for your help and time!

D Reply
Advait Patel
Wed, 9th April 2014
Hello Friend,
I want time liner code with some example. Can you help me ?

tahnk you in advance. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement