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

Jeannie
Wed, 17th August 2011
Hi, this plug-in is exactly what I was looking for a week, but i can't get it to work!

Error message: "This file does not have a valid Header."

What do i need to do??

Thanks!

Reply
Kevin Liew Admin
Wed, 17th August 2011
that's weird Did the download version work for you? Reply
bogomip
Thu, 18th August 2011
very nice tutorial and yes as was mentioned you do need to use the .stop() function. I have been coding for a great many years and it is good to finally see that there is another who shares their knowledge. :) Reply
Kevin Liew Admin
Thu, 13th October 2011
Hi Bogomip, Thanks for the reminder :) I have updated the script. Reply
Kurt
Wed, 19th October 2011
It seems there is a very basic property lacking: if I press a button it's becomes "highlighted" to indicate that it is selected; however if afterwards I press another button this one also becomes highlighted, whereas intuitively only one button should be highlighted at a time. Reply
Kevin Liew Admin
Sun, 6th November 2011
Hi Kurt, well, the thing is, after you click on the menu, it should navigate to the new page hence the highlighted state should be cleared. Unless you wanna use this for an AJAX page, then you will need to remove the selected class first. Reply
indoblogger.eu
Wed, 26th October 2011
great tutorial Reply
laws
Tue, 1st November 2011
divs shouldnt be in <li> items wont validate....this is bullshit! Reply
Shadowcodes
Wed, 16th November 2011
I don't see any "div's" in the html ???

What are you smokin ? Reply
Rocket Man
Tue, 29th November 2011
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
Tue, 29th November 2011
Yes you can. In CSS, set the width for #navMenu. Then set the margin to margin:0 auto; Reply
Brandon
Mon, 12th December 2011
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
Tue, 20th December 2011
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
Thu, 22nd December 2011
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
Thu, 22nd December 2011
Cool, that's a clever technique :) Reply
Amit Kumar
Thu, 26th January 2012
Add a text-decoration: none for the link. Makes it look more aesthetic. Otherwise, a job well done. Thanks! Reply
oskar
Thu, 26th January 2012
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
Mon, 20th February 2012
Yes, go ahead and use it in wherever you want. :) Reply
Lizzie
Fri, 17th February 2012
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
Mon, 20th February 2012
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
Thu, 23rd February 2012
How do you changes the text color on hover Reply
Kevin Liew Admin
Thu, 23rd February 2012
In the CSS:

#navMenu li .hover {
......
......
color: #f00;
} Reply
Tomas
Tue, 6th March 2012
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
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