10 Horizontal Menus with jQuery Effects

Posted by jcargoo | Saturday, November 7, 2009
| 0Delicious Twitter Reddit Digg Loading...

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

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(
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() {
left : $('.current1').offset().left,
width : parseFloat($('.current1').width(), 10)
- parseFloat($('.hoverMenu1').css(
"padding-left"), 10) * 2
}, 600, 'easeOutBounce');

jQuery plugins used : jquery.easing.1.3.js and jquery.color.js.

Read also :
7 Vertical Menus With jQuery Effects

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

0 Previous Comments