Tutorials

Create a Good Looking Floating Menu with jQuery Easing

Written by Kevin Liew on 05 Oct 2009
140,013 Views • Shares
22 comments

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
indrian 6 years ago
hello,,
how to make the tab view like yours (recent comment, community news)
please....
Reply
tohed 6 years ago
Thanks very nice menu.The only issue I have:
it does not work in IE6.can it possible?
Reply
T 6 years ago
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 6 years ago
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 6 years ago
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 5 years ago
Thanks to Queness a very good floating menu i think i'm gonna used more Jquery and his effects
Reply
Mark 5 years ago
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 5 years ago
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 5 years ago
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