Animated navigation menu with jQuery

Making an animated navigation menu is pretty simple with jQuery. Let's start with a basic XHTML code:

<ul id="navigation">
<li><a href="#">Tutorials</a><span>My tutorials</span></li>
<li><a href="#">Blog</a><span>A blog on web standards</span></li>
<li><a href="#">Tests</a><span>Tests on web standards</span></li>
</ul>

Now let's add our CSS styles:

body {
 margin: 0 auto;
 width: 570px;
 font: 75%/120% Arial, Helvetica, sans-serif;
    padding: 10px 0;
}

#navigation {
 margin: 100px 0 0;
 padding: 0;
 list-style: none;
 height: 100%;
}

#navigation li {
 padding: 0;
 margin: 0 2px;
 float: left;
 position: relative;
 text-align: center;
}
#navigation a {
 padding: 14px 10px;
 display: block;
 color: #000;
 width: 144px;
 text-decoration: none;
 font-weight: bold;
 background: url(img/item.gif) no-repeat 50% 50%;
 height: 100%;
}
#navigation li span {
 background: url(img/tooltip.png) no-repeat;
 width: 180px;
 height: 45px;
 position: absolute;
 top: -85px;
 left: -15px;
 text-align: center;
 padding: 20px 12px 10px;
 z-index: 2;
 display: none;
}

As you can see, the span elements which contain the description of each menu item have been hidden by default. Further, our tooltips will be absolutely positioned just on the top of each item. Now let's add jQuery:

$(document).ready(function(){

 $("#navigation a").hover(function() {
  $(this).next("span").animate({opacity: "show", top: "-75"}, "slow");
 }, function() {
  $(this).next("span").animate({opacity: "hide", top: "-85"}, "fast");
 });


});

We're using the animate() method together with absolute positioning and opacity settings. You can see the final result here.