jQuery: menu con effetto rimbalzo

Creare un menu con un effetto rimbalzo è alquanto semplice con jQuery. Quello di cui abbiamo bisogno è il plugin Easing e il suo valore easeOutBounce da applicare sul metodo animate(). La restante parte dell'implementazione non presenta particolari difficoltà. Vediamone i dettagli.

Partiamo da una marcatura molto semplice:

<ul id="navigation">

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

</ul>

Nel CSS abbiamo bisogno di definire l'altezza del menu in modo tale che sia superiore all'altezza dei link. A loro volta i link dovranno essere posizionati in modo relativo per poter consentire l'animazione jQuery:

#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;
	border-radius: 6px 6px 0 0;
}

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

Ora con jQuery dobbiamo intervenire sulla proprietà CSS bottom e sull'altezza di ciascun link, aggiustandone al contempo l'interlinea. Al metodo animate() aggiungeremo il valore easeOutBounce per creare l'effetto di rimbalzo. Inoltre useremo il metodo stop() per impedire che l'animazione corrente venga aggiunta alla coda di animazioni:

$(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');
    
    
    });
  
  
  });

});

Potete visionare l'esempio finale in questa pagina.