Create a Good Looking Floating Menu with jQuery Easing

Create a Good Looking Floating Menu with jQuery Easing


Create a Good Looking Floating Menu with jQuery Easing

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!

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

22 comments

libeco
Tue, 6th October 2009
It does not work in Maxthon (IE7). Reply
kevin Admin
Tue, 6th October 2009
hi, just found out the problem. our beloving IE doesnt read height:inherit properly. It\'s fixed. Reply
bucabay
Wed, 7th October 2009
Pretty neat. Works fine in Chrome. Reply
triograf
Mon, 12th October 2009
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
Mon, 12th October 2009
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
Mon, 12th October 2009
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
Tue, 23rd February 2010
this really good thx !! Reply
kevin Admin
Tue, 16th March 2010
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
Tue, 16th March 2010
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
Sat, 20th March 2010
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
Sun, 21st March 2010
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
Thu, 1st April 2010
tnx kevin awesome fix Reply
indrian
Fri, 9th April 2010
hello,,
how to make the tab view like yours (recent comment, community news)
please.... Reply
indrian
Fri, 9th April 2010
hello,,
how to make the tab view like yours (recent comment, community news)
please.... Reply
tohed
Tue, 29th June 2010
Thanks very nice menu.The only issue I have:
it does not work in IE6.can it possible? Reply
T
Fri, 6th August 2010
When it comes to copyright and usage. What do you mean by "You cannot copy whole tutorials (unless permission is given), either in English or translated to another language."

I would like to consider your design for my website. If I were to change out the color of the floating menu and keep everything else the same, would I break your rule?

Thanks,
~T
Reply
kevin Admin
Sun, 8th August 2010
Hi T, the copyright usage says that you can't republish this tutorial/article in other website or different languages unless permission was given.

If you want to use the script or design that come with the script, it's fine. You can modify and edit it as much as you want. Reply
Mark
Thu, 14th October 2010
Great tutorial, many thanks!

I want to ask if you know any way to do a realistic shadow effect under the button during the animation.


Thanks for your time! Reply
smiler
Wed, 14th September 2011
Thanks to Queness a very good floating menu i think i'm gonna used more Jquery and his effects Reply
Mark
Wed, 28th September 2011
Hi,
thanks for the code . BTW i have a weird question, cuz im totally new to this world . how am i gonna attach this js file and css file it seems not working.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main</title>
<link href="file:styles.css" rel="stylesheet" type="text/css" />
Reply
Kevin Liew Admin
Wed, 28th September 2011
Please download the demo, I have included all the assets, you should able to see how I reference those css and js file from the source code. Reply
Mateo
Sat, 3rd March 2012
First thanks for creating this menu. Its really nice and I would like to use it myself on my site but Im not a CSS person at all. I attempted to use Mark's suggestion to change the background images but Im having issues. Notice the "item1" but the image doesnt show, it shows the original image "menu.png". Again, sorry for the noob CSS question, I have no real idea how to change individual images.

Any help would be greatly appreciated.

Heres how the html looks


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


CSS

#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;
}
#menu li a.item1 {
background:url(images/research.jpg);
} 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