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

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