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.


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

smooth jquery menu and sleek jquery menu

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>

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 class="ybg"></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 {
   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;

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,


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(){
   $('#nav2 li.ybg').stop().animate({height:"4px"},150,function(){

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.


50 thoughts on “Sleek and Smooth animated menu using jQuery

  1. This is some really nice snippet. I like the “animation” on the menu, definitely. Really nice to have you back :)

  2. @stratosg – thanks mate for your words….

  3. Nice work Roshan. I have always heard this effect referred to as the ‘lava lamp’ effect. There are actually a few jQuery plugins to do this as well, you can check out a nice one here if you like:


  4. @drew – thanks for the link of the plugin … never knew that it was called as a lava lamp effect..

  5. Antonio M Matioli

    Hello friend came here to do a tour and explain my thinking
    you have a blog site to show some or all its
    logical work and earn many visits your blog has great propaganda is then you also want your blog and for that to happen you must also enter into other blogs to make a charm to see if people Clik in their advertising, this is the question that I do not because we help each other if the objective
    of several bloggers is the same when I start a blog
    I get in advertisements is not prohibited after all they are the
    is to be seen and see if your content is good find a good price I think that of Antonio.

    Google translation

  6. Kevin

    You never fail to impress, great post my friend! Really impressed as always!

  7. @kevin – thanks a lot mate…

  8. Ram

    Thanks Roshan. Great Work!!

  9. san

    i am waiting u r new post thz great job


    Hi. I posted something on “check username availability in ajax and php using jquery’s fading effect” 6 days ago, my comment it still waiting for approval… So, how long does it takes to approve a comment, and better jet to be answered. Tnx.

  11. Mahesh

    Hello , i see some PHP module. I want help in Joomla? can u help me how to create a framework in Joomla!

  12. Atlanta Roof Contractor

    thank You for the code snippets. I initially found this pretty confusing, not being that familiar with jquery, but it has encouraged me to study it a little further. Nice work. Well presented.

  13. The plugin has real cool effect… n thats amazing indeed!!!!

  14. Really Good Tutorial .. Thanks Roshan ji !

  15. This is really very good… Thanks

  16. Thanks A Lot For This

  17. yww

    just have to say, your site is awesome!

  18. Nice nav :- ) i like it,thanks

  19. Sean

    Thanks for your useful info, I think it’s a good topic.

  20. I am loving these work arounds with moo tools. I use it too. Thanx for the posts.

  21. Insightful post, mate. Your knowledge of the subject is thorough as is evident from your explanations.

  22. this is awesome tools. it cold be better in WP

  23. Superb Effect :)

  24. Nice.. I like it so much

  25. Nice! Thanks for the code :)

  26. very nice tutorial. I am also jQuery lover. 😀

  27. Hi,
    I have been reading and looking your blog on regular basis. I have liked all your posts. Thanks for all the wonderful sharing. You explain all the things clearly. That is the best part along with this all your code snippets.

    Thank you very much..

  28. @Malay Mehta – thanks a lot man…

  29. Really nice. Thanks a lot. Keep it up.

  30. I always wanted to do this. Thanks a ton for the snippets

  31. Hi Roshan,

    I like this jquery animated menu script. Simple explaination. Good work.


  32. good post:D

  33. good post good site good admin:D

  34. thanks ver very good site :D:D:D
    thanks admin:D

  35. thanks :D:D:D:

  36. The following horizontal menu template would be perfect for this tutorial:

  37. Thank you very much for sharing.Good postttt.

  38. Thank you very much for sharing.very nice article

  39. Keshab Maharjan

    really happening tutorial

  40. looks good

  41. Aneeta

    This is really nice jQuery menu…

  42. Anee

    nice menu

  43. its like a NAVA…hohohoho
    its good, thanks for tutor

  44. Very funky!!! I like it!!

  45. Irina

    Do you publish ads of other services on your blog? I’m looking for good resources to buy ads for my sites. Please contact me by email.

  46. Thanks for the post I like the top and bottom demo. but I fined the bouncing off putting and that it is distracting.

  47. Hi everybody, Hi @Roshan i really appreciate what you have done! just a great work;
    Just one thing if you can explain to me:
    How could i set the current href element highlighted on its current page???
    May be a stupid question but I’m new on the web development.


  48. Ramzz

    I am not able run the Ajax drop down list program which has been copied from “Populate triple drop down list from database using Ajax and PHP” …
    The error is
    Warning: mysql_connect() [function.mysql-connect]: Access denied for user ‘root’@’localhost’ (using password: NO) in C:\xampp\htdocs\findState.php on line 16
    Could not connect: Access denied for user ‘root’@’localhost’ (using password: NO)

    pls help me

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>