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.

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!

• TAGS:
• CSS
• HTML
• Javascript
• jQuery
• Tutorial