Realizzare un menu di navigazione animato con jQuery richiede senz'altro un'attenta preparazione del codice CSS. Infatti vogliamo creare un menu a bottoni con un effetto su hover che farà apparire dei tooltip sopra ciascun bottone. Per creare un effetto di movimento dovremo giocare con il valore della proprietà top usata nel posizionamento contestuale. In altre parole a ciascun link sarà affiancato un elemento span con il testo da mostrare. Vediamo l'implementazione.
Il codice HTML è il seguente:
<ul id="navigation">
<li><a href="#">...</a>
<span>...</span>
</li>
<!-- altre voci -->
</ul>
Definita questa struttura, passiamo agli stili CSS:
#navigation {
margin: 100px 0 0;
padding: 0;
list-style: none;
height: 100%;
}
#navigation li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
#navigation a {
padding: 14px 10px;
display: block;
color: #000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(img/item.gif) no-repeat 50% 50%;
height: 100%;
}
#navigation li span {
background: url(img/tooltip.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
z-index: 2;
display: none;
}
Abbiamo creato un posizionamento contestuale su ciascuna voce del menu. Quindi gli elementi span ivi posizionati hanno ricevuto un offset verticale ed orizzontale negativo di 85 e 15 pixel, rispettivamente. Infine tali elementi sono stati nascosti.
Ora con jQuery dobbiamo creare un effetto di comparsa e abbassamento del tooltip quando il mouse entra sul bottone, ed un effetto di scomparsa e di innalzamento quando il mouse si allontana dal bottone. Ecco come:
$(function() {
$('a', '#navigation').hover(function() {
$(this).next().stop(true, true).
animate({
opacity: 'show',
top: - 75
}, 'slow');
}, function() {
$(this).next().stop(true, true).
animate({
opacity: 'hide',
top: - 85
}, 'slow');
});
});
Giocando con la proprietà opacity e i valori custom hide e show facciamo apparire e scomparire i tooltip, mentre aggiustando il valore della proprietà top otteniamo l'effetto del movimento verticale. Usiamo stop(true, true) per far si che su ogni passaggio del mouse ci sia una sola animazione, senza concatenazioni.
Potete visionare l'esempio finale in questa pagina.