Create a Good Looking Floating Menu with jQuery Easing

Written by Kevin Liew on 05 Oct 2009
164,504 Views • Tutorials

Introduction

In this tutorial, we are about to learn how to create a floating menu. Yes, a floating effect using jquery.easing, animate top value and a png image. What it does is, on mouse over, the menu item will float, and on mouse out, it will sink. Very simple, but it looks really attractive.

1. HTML

The following is the html layout. Remember, always keep the html as clean as possible. The .selected class is to allow jquery detect the selected item.

<ul id="menu">
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li class="selected" class="item3"><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
	<li><a href="#">Item 5</a></li>
</ul>

2. CSS

Refer to the chart below, that the layout of this float menu.

float menu structure

And also, we will use the quick png fix for the png image we are using in this tutorial.

#menu {
	list-style:none;	
	padding:0;
	margin:0 auto;;
	height:70px;
	width:600px;
}
	
	#menu li {
		float:left;
		width:109px;
		height:70px;
		position:relative;
		overflow:hidden;
	}

	#menu li a  {
		position:absolute;
		top:20px;
		text-indent:-999em;
		background:url(menu.png) no-repeat 0 0;
		display:block; 
		width:109px; 
		height:70px;

		/* fast png fix for ie6 */
		position:relative;
		behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));

3. Javascript

This a simple jQuery script, what it does is simply set the top value to 0 and set the default top value if on mouse out. We are using jQUery.easing plugin, that means you can have different animation effect. :)

$(document).ready(function () {

	//get the default top value
	var top_val = $('#menu li a').css('top');

	//animate the selected menu item
	$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});		

	$('#menu li').hover(
		function () {
				
			//animate the menu item with 0 top value
			$(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});		
		},
		function () {

			//set the position to default
			$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});		

			//always keep the previously selected item in fixed position			
			$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});		
		}		
	);
	
});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, bookmark it and help me to spread this tutorial to our friends! :) 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.

22 comments
libeco 13 years ago
It does not work in Maxthon (IE7).
Reply
kevin Admin 13 years ago
hi, just found out the problem. our beloving IE doesnt read height:inherit properly. It\'s fixed.
Reply
bucabay 13 years ago
Pretty neat. Works fine in Chrome.
Reply
triograf 13 years ago
How can I give each list-item a unique bg-image, not just only the same for all of them: menu?
thanks
Reply
kevin Admin 13 years ago
hi triograf, yea, you can,

in this css code:

#menu li a {}

take the png fix code and put it in

.png { ... png fix code .. }

after that, to use different images, you need to give the anchor tag in the LI a class name, for example,
#menu li a {generic setting}
#menu li a.home {background:url(...)}
#menu li a.download {background:url(...)}
#menu li a.contact {background:url(...)}

then, you can assign the background image, width and heigth for it..

and in the anchor tag, remember to put png class to the tag as well... put png only if the image is transparent png.

<a href=\"#\" class=\"home png\">home</a>

I think it should work.. :)
Reply
triograf 13 years ago
Thanks a lot. It works great. The only issue I have: when putting the list into a Div it does not work probably in »Opera«.
Reply
jmj 13 years ago
this really good thx !!
Reply
kevin Admin 13 years ago
yes you actually can do that. Just assign a class to each of the a tag, and you can set different bg for different menu item.
Reply
robchisholm 13 years ago
As above 12 Oct 2009- How can I give each list-item a unique bg-image, not just only the same for all of them: menu?
thanks
Reply
robchisholm 13 years ago
Hello Kevin,

I have attempted to make the changes, but I am not knowledgeable in these areas. Could you give some more straight forward directions please ?

Many thanks Rob Chisholm

You wrote kevin on 16 Mar 2010 says:
yes you actually can do that. Just assign a class to each of the a tag, and you can set different bg for different menu item.
Reply
kevin Admin 13 years ago
Yep, this is an example, if you have 2 items:

<ul id="menu">
<li><a href="#" class="item1">Item 1</a></li>
<li><a href="#" class="item2">Item 2</a></li>
</ul>

in CSS, you can define this

ul li a.item1 {background:url(image1) !important}

ul li a.item2 {background:url(image2) !important}

it should work
Reply
sahil 13 years ago
tnx kevin awesome fix
Reply
indrian 13 years ago
hello,,
how to make the tab view like yours (recent comment, community news)
please....
Reply