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!
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.thanks
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.. :)
thanks
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.
<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
how to make the tab view like yours (recent comment, community news)
please....