Effetto Easing su menù con jQuery UI

Attraverso l’uso di jQuery e delle librerie jQuery UI, è possibile aumentare la gamma di effetti a disposizione delle nostre animazioni. Vediamo come utilizzare la proprietà easing per dare un effetto più dinamico ad un menù a tendina.

La struttura HTML e CSS

Il menù consiste di un semplice insieme di elementi di lista che compongono il primo livello ed eventuali sottolivelli:

<ul>
	<li class="book"><a href="#">wow</a></li>
	<li class="book"><a href="#">wow1</a></li>
	<li class="book"><a href="#">wow2</a></li>
	<li class="book"><a href="#">wow3</a>
		<ul>
			<li><a href="#">Voce1</a></li>
			<li><a href="#">Voce2</a></li>
			<li class="last"><a href="#">Voce3</a></li>
		</ul>
	</li>
</ul>

Il CSS ci permette di usare la proprietà float per affiancare gli elementi di lista di primo livello e di aggiungere le caratteristiche grafiche che più ci aggradano. In questa fase date libero sfogo alla vostra creatività! Anche per quanto riguarda dettagli tecnici non ci sono strade migliori, nel nostro caso per esempio gli elementi di secondo livello sono stati “nascosti” usando un piccolo trick, ovvero la proprietà overflow:hidden. Avremmo benissimo potuto usare display:none e far “mostrare” gli elementi all’apertura della tendina.

.book {
	background:#f90;
	width:100px;
	height:20px;
	float:left;
	margin-right:5px;
	text-align:center;
	overflow:hidden;
	}
ul, li {
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
}
li {
	border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
}
a {
	color:#fff;
	text-decoration:none;
	font-family:arial, sans-serif;
}

Il codice jQuery e le jQuery UI

Come già anticipato, vediamo come realizzare un’animazione dinamica, che crea un effetto di “rimbalzo” delle tendine del menù. Per fare ciò ci serviamo della vasta gamma di effetti “easing” che le jQuery UI mettono a disposizione. Per un elenco dettagliato è possibile visitare il sito ufficiale.

$(document).ready(function () {
	$('.book').hover(
		function() {
			$(this).stop().animate({height: '160px', backgroundColor:'#C00'},{queue:false, duration:1000, easing: 'easeOutBounce'});
			$(this).find('a').animate({color:'#000'});
		},
		function() {
			$(this).stop().animate({height: '20px', backgroundColor:'#fc0'},{queue:false, duration:500, easing: 'linear'});
			$(this).find('a').animate({color:'#fff'});
		}
	);
});

Come si vede subito lo script è molto semplice. La funzione hover(), ci permette di dichiarare che cosa accade al mouseover (prima funzione interna) e al mouseout (seconda funzione interna) su un determinato elemento. Nel nostro caso al passaggio sugli elementi di lista .book. Per rendere cross-browser lo script anche con IE6, sarebbe stato corretto (e più lungo da realizzare) utilizzare i link di primo livello (attribuendo loro una classe e stilizzandoli in modo da rendere correttamente anche su versioni obsolete dei browser) come “target” della funzione hover. IE6 a parte, nella nostra funzione il cuore dell’azione è svolto dalla funzione .animate(). Attraverso di essa rendiamo “graduale” il passaggio dallo stato in cui si trova il nostro oggetto a quello dichiarato all’interno della funzione. Attraverso la proprietà easing gli diciamo come arrivare a quello stato. Oltre alle dichiarazioni stilistiche vediamo la proprietà queue (una booleana che permette, se settata su false, di far iniziare gli effetti istantaneamente) e duration (che dice, in millisecondi, quanto tempo dovrà durare l’animazione). La funzione stop() invece, ci permette di evitare problemi dovuti a passaggi involontari o ripetuti del mouse sopra le voci di menù. Il resto sono finezze o abbellimenti con i quali è giusto che ognuno sperimenti 😉