7 Vertical Menus With jQuery Effects

Posted by jcargoo | Sunday, February 8, 2009
| 0Delicious Twitter Reddit Digg Loading...


7 Useful effects (accordion, bounce…) that you can use to animate your vertical menus with only one level have been gathered in this post.
Two of the menus are using the powerful jQuery Easing Plugin (version 1.3) and the rest is simply using the css and animate functions in order to create custom

animations.




All the menus are chiefly having a common HTML structure:
<ul class="cssclassone">
<li><a class="cssclasstwo" href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
We have chosen to write a simple jQuery code just to make sure to be able to understand how every effect for every right menu is working.
Every effect is triggered thanks to mouseover and mouseout events. For menu D for example, we simply use the jquery.min.js script to create our custom animation using css function to change the background color value and animate function to change the padding-left css property value.
/*Menu D*/
$(".menu2 .menu2_liste li a").mouseover(function () {
$(this).css("background-color","#FFFFFF");
$(this).animate({ paddingLeft: "50px" }, 50 );
});

$(".menu2 .menu2_liste li a").mouseout(function () {
$(this).css("background-color","#ECEFF5");
$(this).animate({ paddingLeft: "4px" }, 50 );
});
Menu E is using the jQuery Easing Plugin (file jquery.easing.1.3.js) with 'easeOutBounce' easing type to make every menu tab to vertically bounce.
/*Menu E*/
$(".sliding-element1 a").mouseover(function(){
$(this).stop().animate({width:'250px'},{queue:false, duration:600, easing: 'easeOutBounce'});
});

$(".sliding-element1 a").mouseout(function(){
$(this).stop().animate({width:'148px'},{queue:false, duration:600, easing: 'easeOutBounce'});
});
Of course this is an unvarnished code which lets you to customize it with your favorite colors and style.
That’s all.
Important: Thanks to Shin, I have added .stop() to every menu script now to get a real accordion effect. Just refresh your browser cache in order to view the “new” live demo.


How to encourage this blog if you like it:
  • Promote our sponsors;
  • Add any kind of comment or critic;
  • Ask me directly by email if you prefer.
Just do something like that, and I will have the huge pleasure to continue posting the best of the creativity I have.




Share this post ?

Digg Reddit Stumble Delicious Technorati Twitter Facebook

14 Previous Comments
  1. mister-merfer | February 9, 2009 at 2:02 AM  

    awesome tricks thanks!

  2. Mikhail Koryak | February 9, 2009 at 2:26 PM  

    why not use a:hover to change the color in the css instead of doing a costly javascript operation?

  3. Anonymous | February 9, 2009 at 7:54 PM  

    Go to a website like csstricks.com and look at their subtle use of jQuery for their navigation. As long as you use something like this in moderation, it's not going to affect load times very much (especially if you're already loading the jQuery script for something else).

  4. jcargoo | February 9, 2009 at 9:21 PM  

    @Mikhail Koryak,
    Again I have to bring back the fact (as I said in the post above) that the purpose is simply to use jQuery functions (so css function and so on) and not pure CSS to do the animation and the color change.

  5. Shane | February 10, 2009 at 5:45 AM  

    Nice tutorial/plugin and examples using JS to overwrite CSS styles. Thanks for postiing.

  6. jcargoo | February 10, 2009 at 5:53 AM  

    Thanks Shane.

  7. Anonymous | February 10, 2009 at 7:22 AM  

    Thanks - nice examples


    btw. Menu F works badly in IE by me

  8. jcargoo | February 10, 2009 at 9:42 AM  

    Yes I agree with you Anonymous it does not work properly in IE (not bad in 7 but really bad in 6) Anyway, in other browsers (webkit ones) it works fine.

  9. shin | February 10, 2009 at 10:07 AM  

    I suggest to add .stop() before .animate in order to avoide a broken accordion effect. You can see it when you hover quickly many times.

  10. jcargoo | February 11, 2009 at 1:58 AM  

    Thanks so much Shin!
    I have done it :)

  11. psedo | March 30, 2009 at 2:06 PM  

    Nice work :) How I can stop the effect on active menu?

  12. jcargoo | March 30, 2009 at 11:20 PM  

    @psedo,
    By using .stop().

  13. psedo | March 31, 2009 at 8:42 AM  

    thank you!it works! :)
    congratulation for the effect it's very nice!

  14. Arti | April 12, 2009 at 6:02 AM  

    Thanks you too much. This is perfect.