Sleek and Smooth animated menu using jQuery

Today, I’m going to show you something interesting with jQuery. Yesterday I was thinking something to post something programming related stuff in blog after long time and I came across a website, whose menu impressed me a lot. But checking it in a while, I found it it was built using mootools. Since it was in mootools, I thought of replicating it in jQuery. I have two example of similar menu, first using jQuery core and CSS and another uses jQuery easing plugin to give bounce effect to the same menu.And I’ve added one more example which I though would be nice menu to show you guys.

VIEW DEMO

First of let me start, with the images which i’ve used in the background to create the first two menus.

and

Please note that the please keep the left image as big as possible if you’re menu text can be long.

Now, let’s look at the html code

Html code for the animated jquery menu

<ul class="nav" id="nav1">
   <li class="first"><a href="#">Home</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Blog</a></li>
   <li class="last"><a href="#">Tutorials</a></li>
   <li class="bg"><div class="left"></div></li>
</ul>

All the list elements are fairly simple and the list with class “bg” is the one which holds the background image for the menu. The code is same for the first and second example but for the third example we use list with class ybg instead of bg.

 <li></li>

CSS code for the smooth jQuery menu

ul.nav { list-style:none;  overflow:hidden;  }

ul.nav li { float:left; height:39px; background-color:#000;  padding:0 5px;  }

ul.nav li.first {
  -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px;
  -moz-border-radius-bottomleft:9px;  -webkit-border-bottom-left-radius:9px;
}

ul.nav li.last {
-moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px;
-moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px;
}

ul.nav li.bg {
   margin:7px 0px 0px 3px; padding-right:8px; position:absolute;
   z-index:50; left:155px; width:60px; background:url(bg-right.png) no-repeat right top;
}

ul.nav li .left { background:url(bg.png) no-repeat left top; height:39px;  }

ul.nav li a {
  padding:8px 20px;  color:#FFF; font-size:18px; font-weight:bold; display:block;
  text-decoration:none; z-index:100; position:relative;
}

ul.nav li.ybg {
  background-color:#FB0; position:absolute; z-index:50;
  left:165px; width:55px; height:4px; margin-top:6px;
}

As you can see there, I’ve used CSS3 rounded corners for the first and last elements of list(obviously doesn’t work IE). Furthermore, the list with class bg is used for the first and second menu examples where the image is used in the background and which moves around on mouse hover on menu with sleek effect. Please note that this list must be positioned absolutely.

The ybg class is used for the background effect for the third menu in the example, which first moves to the menu which has current mouse position and then starts sliding down.
After this, let’s get into jQuery code for providing the sleek effect for the hover menu.

jQuery code for animation in the on menu

$('#nav1 li a').hover(function()
{
  var offset=$(this).offset();
  var thiswidth =$(this).width()+13;
  $('#nav1 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},600);
},
function()
{
  $('#nav1 li.bg').stop().animate({left:"155px",width:"60px"},600);
});

The above is the code for the first menu. You can see that on the hover effect of anchor, first we’ve calculated the offset of menu and also width of the anchor element. Then, finally used animate function of jQuery to move the menu and increse the width of the background to create the nice and sleek effect.

As you can see the second function of hover menu, which is called when mouse is released from the anchor, just reset back the menu to it’s original position.

The code is exactly same for the second menu except the following line,

$('#nav3 li.bg').stop().animate({left:"155px",width:"60px"},600,'easeOutBounce');

You can see the difference easily where I’ve used easeOutBounce easing effect for the bounce out effect when mouse is released form the menu.

$('#nav2 li a').hover(function()
{
  var offset=$(this).offset();
  var thiswidth =$(this).width()+13;
  $('#nav2 li.ybg').stop().animate({left:offset.left+9+"px",width:thiswidth+"px"},400,function(){
     $(this).animate({height:"28px"},150);
  });
},
function()
{
   $('#nav2 li.ybg').stop().animate({height:"4px"},150,function(){
      $(this).animate({left:"165px",width:"55px"},600,'easeOutBounce');
   });
});

And you can see in the above code of the third menu, first of all the menu gets slided to the current position of menu and then the height of the background gets increased to 28px, giving a nice effect. And when mouse is released from the menu, the same things happens but in the reverse order.