Animated Menu Using jQuery

2 Aug 2009 / 17 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?
Xicom Technologies January 4th

This is nice!!! Thanks for sharing.
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

jQueryGlobe