Articles

Animated Menu Using jQuery

2 Aug 2009 / 229 comments

This tutorial illustrates how to implement a nice animated menu using jQuery and CSS. In case you don't know about jQuery, it is a "write less, do more" Javascript library. With jQuery we can create amazing effects on the web pages, writing some few lines of codes, and you don't need to be an experienced web programmer.

You can see the final result at this page, and you can download the complete source code with examples from here.

Step 1 – Set up the Structure

Here is the HTML markup that is used in the demo:

01.
02.
03.
04.
05.
06.
07.
08.
09.

<div id="menu" class="menu">
	<ul>
		<li><a href="javascript:;">Home</a></li>
		<li><a href="javascript:;">Work</a></li>
		<li><a href="javascript:;">Services</a></li>
		<li><a href="javascript:;">Support</a></li>
		<li><a href="javascript:;">Contacts</a></li>
	</ul>
</div>

The basic idea for the script is to create separated layers inside each anchor so we could animate them on hover. We will modify the DOM structure after DOM has finished loading, so each anchor will look something like this:

01.
02.
03.
04.
05.

<a href="javascript:;">
	<span class="out">Home</span>
	<span class="bg"></span>
	<span class="over">Home</span>
</a>

The content of anchor text will be placed inside two span elements, the third one will be used for background image.

Step 2 – Style with CSS

This is only a snippet of the CSS (for full CSS see the working example). I'm using the basic design, but you can customize it how you prefer.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

.menu ul li a span {
	/* all layers will be absolute positioned */
	position: absolute;
	left: 0;
	width: 110px;
}
 
.menu ul li a span.out {
	top: 0px;
}
 
.menu ul li a span.over,
.menu ul li a span.bg {
	/* hide */  
	top: -45px;
}
 
#menu {
	background: #EEE;
}
 
#menu ul li a span {
	color: #000;
}
 
#menu ul li a span.over {
	color: #FFF;
}
 
#menu ul li span.bg {
	/* height of the menu items */  
	height: 45px;
	background: url('bg_over.gif') center center no-repeat;
}

Step 3 - JavaScript

I have added some inline comments so that it can be self explaining, I think.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

/// wrap inner content of each anchor with first layer and append background layer
$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
 
// loop each anchor and add copy of text content
$("#menu li a").each(function() {
	$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
});
 
$("#menu li a").hover(function() {
	// this function is fired when the mouse is moved over
	$(".out",	this).stop().animate({'top':	'45px'},	250); // move down - hide
	$(".over",	this).stop().animate({'top':	'0px'},		250); // move down - show
	$(".bg",	this).stop().animate({'top':	'0px'},		130); // move down - show
 
}, function() {
	// this function is fired when the mouse is moved off
	$(".out",	this).stop().animate({'top':	'0px'},		250); // move up - show
	$(".over",	this).stop().animate({'top':	'-45px'},	250); // move up - hide
	$(".bg",	this).stop().animate({'top':	'-45px'},	130); // move up - hide
});

Conclusion

That's it. You are welcome to check out the demo and download the source code to play with it. Experiment and customize this to fit your needs. If you have any questions, suggestions, or comments, please do not hesitate to let me know.

View Demo - Download

User Comments

omBRE August 13th

Did you try it in IE?
Kete August 13th

Hi. It works perfect on IE6.
jQueryGlobe August 14th

I updated example so it works for poor IE6 users, too.
Emrah August 20th

Good job. thanks
adi daniel August 20th

Hi I love this menu! Do you have any version with sublinks? This will be a great feature to implement. Bye
jQueryGlobe August 21st

@adi daniel: Usually animated menus are used only for top level navigation. If you could show nice example where sublinks are shown, I could try to recreate.
SunJoo September 22nd

Indeed the very fine code and the excellent one. Thanks for sharing this. Cheers,SunJoo
Kemal ONUR October 9th

Very nice...
prasadsambari October 14th

Hi Have u checked in IE 7, because i tryed in ie 7, it showing the mouse over button also. Prasadsambari
Madi October 15th

very nice How can we apply this on vertical menu?
jQueryGlobe October 16th

@Madi: I haven`t tried, but you could change css to align vertically and change animation directions.
Francesco October 18th

Thank you very much for sharing it. Amazing effect!
Video Contests November 4th

I want to implement on our contests page in a vertical orientation. How to change the direction.
dev November 16th

what diffrence between $(".out", this) and $(".out")?? any reference?
adi daniel January 12th

Hi and thanks for replay: "Usually animated menus are used only for top level navigation. If you could show nice example where sublinks are shown, I could try to recreate." Any type of submenu you think will suite. I want to use this menu for a wordpress them and there i need to be able to display submenu links. I realy like your project and i hope i will be able to use it. Thank you
Catalin Cimpanu May 28th

What is the license of this script?
Do Teste June 7th

Any chance to add submenus to this example?
blueunicorn June 29th

nice work mate
JadiysonTaki August 29th

very nice tips
fm stereo transmitter September 3rd

This is really useful information. Will do it in the future. Yeah, the system is as corrupt as the politician...lol :D Cool, thanks for the information on this matter.
tiffany silver bracelets September 3rd

@linds: Yes, but you need to convert quotes and greater and less than symbols into their html entity equivalents.
Discount flowers at online Canada September 3rd

Hey great stuff, thank you for sharing this useful information and i will let know my friends as well.
solar photovoltaics September 3rd

If you could show nice example where sublinks are shown, I could try to recreate."
replica bags September 3rd

This is really useful information. Will do it in the future. Yeah, the system is as corrupt as the politician...lol :D Cool, thanks for the information on this matter.
kampret September 4th

thank's
placement financier September 4th

nice blog,but you could have made this blog more cool if you could configure the language changer pluigin but all the same you have done a good job
Track Awareness Course September 4th

Nice one! It is amazing to create animation effect with coding that also using java and CSS. Thanks to provide such creative tutorial.
moscow hotels September 4th

if you want to relax with family, friends or alone, then you here! Do not miss your chance! I am very happy! " the best place!
Aussie Life September 5th

the very fine code and the excellent one. Thanks for sharing this. Cheers,SunJoo
assurance auto pas cher September 5th

nice blog,but you could have made this blog more cool if you could configure the language changer pluigin but all the same you have done a good job
Pool Resurfacing Tucson September 6th

So confused!
tempurpedic September 6th

Good tutorial! You really do me a favor.
Acheter Cialis September 6th

great post! good job with your HTML knowledge. i inspired u because i have no knowledge i HTML but ur blog take some information to HTML ANIMATION. thanks to share it. keep it up.
nose job chicago September 6th

It's so refreshing to find articles like the ones you post on your site. Very informative reading. I will keep you bookmarked. Thanks!
rhinoplasty dallas September 6th

Your blog caught my eye. Thanks for sharing this information.
rhinoplasty los angeles September 6th

Saw your Blog bookmarked on Reddit.I really enjoy your blog and marketing tactic. Investigate out my Farmville Guidebook in the event you get a moment.
nose job scottsdale September 6th

Excellent read, I just passed this onto a colleague who was doing a little research on that.
nose surgery illinois September 6th

It's so refreshing to find articles like the ones you post on your site. Very informative reading. I will keep you bookmarked