10 Horizontal Menus with jQuery Effects

Well this is a roundup of some simple horizontal menus I have developed with jQuery.
They are all free to use. You can customize the code as you like. Every menu shows a different manner to present the user interaction.

jQuery comes to make all these menus more unique and special.
Please do not hesitate to add any kind of remark to improve this work.
All menus have been successfully tested in Firefox3.5.5, IE8, Chrome 3.0.195.27 and Safari 4.0.3.
One more thing to mention is that all these menus need to be slightly improved to be full developed CSS menus.
Let's have a try?

View Demo

Rounded corner (not in IE) background follows any menu link you move the mouse on it with an elastic effect.

The lightning image moves over the menu link with elastic effect.

Spice your menu with random colors when hovering.

A professional menu to add more significance to your menu.

One another elastic effect.

Give your bottom border another animation.

A colored vertical line is shown inside every menu item when hovering.

Every menu item grows when you put the mouse on.

Detailed menu content.

Every menu item has its own defined color.

Here is a code snippet for the first menu:


$('.hoverMenu1').css("left", $('.current1').offset().left).css(
"width",
parseFloat($('.current1').width(), 10)
- parseFloat($('.hoverMenu1').css("padding-left"), 10)
* 2);
$('#bar1 li a').hover(
   function() {
       var offset = $(this).offset();
       $('.hoverMenu1').stop().animate( {
       left : offset.left,
       width : $(this).width()
       }, 1000, 'easeOutElastic');
   },
   function() {
       $('.hoverMenu1').stop().animate(
       {
       left : $('.current1').offset().left,
       width : parseFloat($('.current1').width(), 10)
       - parseFloat($('.hoverMenu1').css(
       "padding-left"), 10) * 2
       }, 600, 'easeOutBounce');
});