Sleek and Smooth animated menu using jQuery

Advertisement

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.

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>
</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 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 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.

DOWNLOAD SOURCE CODE

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

50 Comments on “Sleek and Smooth animated menu using jQuery”

  • stratosg wrote on 28 July, 2009, 11:02

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

  • Roshan wrote on 28 July, 2009, 15:25

    @stratosg – thanks mate for your words….

  • Drew Douglass wrote on 28 July, 2009, 20:42

    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:

    http://nixboxdesigns.com/demos/jquery-lavalamp-demos.html

    -Drew

  • Roshan wrote on 29 July, 2009, 0:50

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

  • Antonio M Matioli wrote on 31 July, 2009, 11:31

    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

    http://curiosidadesdoplantaterra.blogs.sapo.pt/

    http://noticiasjornaistv.blogspot.com/

  • Kevin wrote on 17 August, 2009, 4:47

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

  • Roshan wrote on 17 August, 2009, 6:50

    @kevin – thanks a lot mate…

  • Ram wrote on 20 August, 2009, 4:42

    Thanks Roshan. Great Work!!

  • san wrote on 8 September, 2009, 4:23

    i am waiting u r new post thz great job

  • lauretta.gs wrote on 14 September, 2009, 18:46

    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.

  • Mahesh wrote on 24 September, 2009, 6:35

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

  • Atlanta Roof Contractor wrote on 26 October, 2009, 15:18

    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.

  • Debalina Basu wrote on 20 November, 2009, 12:02

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

    http://www.msoft-technologies.com
    http://www.msoftwebtemplates.com

  • Pawan Adhikari wrote on 2 December, 2009, 7:32

    Really Good Tutorial .. Thanks Roshan ji !

  • indialike.com wrote on 8 December, 2009, 10:45

    This is really very good… Thanks

  • Sohbet wrote on 9 December, 2009, 22:52

    Thanks A Lot For This

  • yww wrote on 10 December, 2009, 16:37

    just have to say, your site is awesome!

  • Artur Ejsmont wrote on 14 December, 2009, 0:52

    Nice nav :- ) i like it,thanks

  • Sean wrote on 28 December, 2009, 8:47

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

  • bobo@SMSDAM wrote on 30 December, 2009, 0:28

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

  • ebusinessuk wrote on 30 December, 2009, 14:39

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

  • kobi wrote on 13 January, 2010, 13:10

    this is awesome tools. it cold be better in WP

  • SYMK wrote on 16 January, 2010, 9:10

    Superb Effect :)

  • Arif wrote on 12 February, 2010, 9:04

    Nice.. I like it so much

  • Anup wrote on 4 March, 2010, 2:10

    Nice! Thanks for the code :)

  • nilambar wrote on 31 March, 2010, 11:20

    very nice tutorial. I am also jQuery lover. :D

  • Malay Mehta wrote on 19 April, 2010, 7:38

    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..

  • Roshan wrote on 21 April, 2010, 3:52

    @Malay Mehta – thanks a lot man…

  • Rakshit wrote on 7 May, 2010, 6:02

    Really nice. Thanks a lot. Keep it up.

  • Abhisek wrote on 1 June, 2010, 12:12

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

  • Amit wrote on 5 June, 2010, 12:30

    Hi Roshan,

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

    Thanks

  • araba yar??? wrote on 16 June, 2010, 14:51

    good post:D

  • rusya parsiyel ta??ma wrote on 17 June, 2010, 19:38

    good post good site good admin:D

  • rusya nakliye firmalar? wrote on 18 June, 2010, 11:41

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

  • rusya parsiyel ta??ma wrote on 18 June, 2010, 11:43

    thanks :D:D:D:

  • Vector wrote on 22 June, 2010, 21:48

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

    http://www.easyvectors.com/browse/combination/5-beautiful-web-navigation-bars

  • firma rehberi wrote on 23 June, 2010, 11:27

    Thank you very much for sharing.Good postttt.

  • Barbie Giydirme wrote on 23 June, 2010, 14:59

    Thank you very much for sharing.very nice article

  • Keshab Maharjan wrote on 2 July, 2010, 10:36

    really happening tutorial

  • aidcr wrote on 20 July, 2010, 7:42

    looks good

  • Aneeta wrote on 10 August, 2010, 5:06

    This is really nice jQuery menu…

  • Anee wrote on 10 August, 2010, 5:40

    nice menu

  • Beben wrote on 27 September, 2010, 15:43

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

  • Salvatore Scarpato wrote on 7 February, 2011, 21:59

    Very funky!!! I like it!!

  • Irina wrote on 1 March, 2011, 15:27

    Hello!
    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.

  • purencool wrote on 1 March, 2011, 21:14

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

  • barry wrote on 15 June, 2011, 14:40

    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.

    Thanks;

  • Ramzz wrote on 19 February, 2012, 18:31

    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

Trackbacks

  1. Sleek and Smooth animated menu using jQuery- MakeaPost
  2. ??????? » [Web] ????

Write a Comment

 


Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.