Register now or login here to start promoting your blog and your favourite articles.
Create a Good Looking Floating Menu with jQuery Easing
5 Oct 2009 - 17 Comments
This tutorial will show you how to create a horizontal menu with floating effect by using jquery.easing and jquery animate function. It's a simple effect but the final product is quite nice looking and elegant.
Author: kevin | Source: queness
Demonstration Download

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!

Demonstration Download

Copyright & Usage

The effects and techniques demonstrated in tutorials on Queness can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.

Share This Post to Support Me! :)


Comments

kevin on 8 Aug 2010 says:
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.
T on 6 Aug 2010 says:
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
tohed on 29 Jun 2010 says:
Thanks very nice menu.The only issue I have:
it does not work in IE6.can it possible?
indrian on 9 Apr 2010 says:
hello,,
how to make the tab view like yours (recent comment, community news)
please....
indrian on 9 Apr 2010 says:
hello,,
how to make the tab view like yours (recent comment, community news)
please....
sahil on 1 Apr 2010 says:
tnx kevin awesome fix
kevin on 21 Mar 2010 says:
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
robchisholm on 20 Mar 2010 says:
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.
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.
robchisholm on 16 Mar 2010 says:
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
  • Page :
  • 1
  • 2


Leave a comment

Subscribe RSS Subscribe RSS, Keep yourself updated with queness latest posts!
Pixel Crayons

Buy wholesale computers directly from China at DHgate.com

Discover the tools to build your e-Commerce Site with Netfirms

Buy China Products from Made-in-China.com

Cocktail Dresses

SmartPhone Cell Phone

Wholesale electronics

Web Hosting Rating

Buy WOW Gold

Get your cdl today

Debt collector review

  •  
  •  
  •  
  •  
  •  

Community News

Recent Comments

Random Posts


View all posts and news Back to top

About the Author

A web designer and developer who is passionate and keen on contributing to the web development industry. Feel free to say hi to me, or follow me on twitter.

Kevin Liew