7 Vertical Menus With jQuery Effects

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.

View Demo

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.

Download Here

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 ?

---