jQuery: menu a discesa animato

Realizzare un menu a discesa animato con jQuery richiede semplicemente l'utilizzo del plugin aggiuntivo Easing. Per il resto, si tratta di un normale menu a discesa in cui gran parte dell'effetto finale è costituito da precise regole CSS. Vediamo insieme i dettagli dell'implementazione.

Abbiamo la seguente struttura HTML:


<ul id="navigation">
  <li><a href="#" id="home">Home</a><span>Home page</span></li>
  <li><a href="#" id="about">About</a><span>Info</span></li>
  <li><a href="#" id="contact">Contatti</a><span>Contattaci</span></li>
</ul>

Gli elementi span dovranno essere larghi quanto ciascuna voce e alti 150 pixels per contenere ciascuno un'immagine di sfondo. Per preparare l'effetto di discesa, azzeriamo semplicemente l'altezza di tali elementi:


#navigation {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 3em;
}

#navigation li {
	float: left;
	height: 100%;
	margin: 0;
}

#navigation a {
	float: left;
	height: 100%;
	width: 6em;
	text-align: center;
	color: #fff;
	text-decoration: none;
	line-height: 3;
}

#navigation #home {
	background: #6AA63B;
}
#navigation #home + span {

  background: url(home.jpg) top left no-repeat;

}

#navigation #about {
	background: #FBC700;

}

#navigation #about + span {
	background: url(about.jpg) top left no-repeat;
}

#navigation #contact {
	background: #D52100;

}

#navigation #contact + span {
	background: url(contact.jpg) top left no-repeat;
}

#navigation li span {
	display: block;
	width: 6em;
	height: 0px;
	overflow: hidden;
	clear: left;
	color: #fff;
	line-height: 150px;
	text-align: center;
}

La dichiarazione overflow: hidden su ciascun elemento span impedisce a qualsiasi contenuto in eccesso di essere visualizzato, rimuovendo così dalla vista questi elementi.

Con jQuery dobbiamo ora associare un evento mouseover su ciascun link per mostrare gli elementi span animandone l'altezza e un evento mouseout su tali elementi per nasconderli:


$(function() {

  $('li', '#navigation').each(function() {
  
    var $a = $('a', $(this));
    var $span = $a.next();
    
    $a.mouseover(function() {
    
      $span.stop(true, true).
      animate({
        height: 150
      }, 600, 'easeOutBounce');
    
    
    });
    
    $span.mouseout(function() {
    
      $span.stop(true, true).
      animate({
        height: 0
      }, 600, 'easeOutBounce');
    
    
    });

  
  
  });

});

Potete visionare l'esempio finale in questa pagina.

Torna su