jQuery: bouncing menu

In this post I will show you how to create a nice bouncing effect on the items of a navigation menu. To accomplish this, we'll use the Easing jQuery plugin and its easeOutBounce value. To start with, let's take a look at our basic markup:

<ul id="navigation">

 <li><a href="#">Home</a></li>
 <li><a href="#">Articles</a></li>
 <li><a href="#">About</a></li>

</ul>

Very simple. Now our CSS styles:

#navigation {
 height: 4em;
 margin: 0;
 padding: 0 1em;
 list-style: none;
 border-bottom: 2px solid #666;
}

#navigation li {
 height: 100%;
 float: left;
 margin-right: 0.5em;
}

#navigation a {
 float: left;
 height: 2em;
 padding: 0 1em;
 background: #232326;
 color: #fff;
 line-height: 2;
 text-transform: uppercase;
 font-weight: bold;
 text-decoration: none;
 margin: 2em 0 0 0;
 letter-spacing: 0.1em;
 position: relative;
}

#navigation a:hover {
 background: #666;
}

All menu links have a top margin set that puts them on the very bottom of the horizontal menu. We need to take this into account when writing our jQuery code. For that reason we've declared them as relatively positioned (it will be clear in a moment).

$(function() {

  $('li', '#navigation').each(function() {
  
  
    var $li = $(this);
    var $a = $('a', $li);
    
    $a.hover(function() {
    
      $a.stop(true, true).animate({
        height: '3em',
        lineHeight: '3em',
        bottom: '1em'
      }, 'slow', 'easeOutBounce');
    
    
    
    }, function() {
    
    
      $a.stop(true, true).animate({
        height: '2em',
        lineHeight: '2em',
        bottom: 0
      }, 'slow', 'easeOutBounce');
    
    
    });
  
  
  });

});

When a user hovers a link, the item's width and line-height is increased together with its bottom property (to make each item stay fixed at the bottom of the menu). When the mouse leaves the link, all properties get back to their default values. Note how the easing value comes just after the animation speed. You can see the demo below.

Demo

Live demo