Menu animato con jquery

Come ho giá ribadido, jquery é senza dubbio, a mio modo di vedere, il miglior framework in circolazione.

La sua semplicitá e la sua facilitá enll’apprenderlo permettono di realizzare stupendi effetti sulle nostre pagine senza essere grandi esperti di programmazione e senza usare complicati flash o simili. Con questo tutorial vi illustreró come realizzare un bellissimo menú animato usando pochissime linee di codice.

Come sempre ho preparato un esempio giá pronto e scaricabile.

icon smile Menu animato con jquery

Passiamo alla realizzazione, non perdo tempo su come scaricare e linkare Jquery nei vostri documenti, dovrebbe essere scontato, icon smile Menu animato con jquery quindi passiamo direttamente a creare il codice per il menú :

<div id=”navigation”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Freebies</a></li>
<li><a href=”#”>Tutorials</a></li>
<li><a href=”#”>Downloads</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

Un div contenitore, navigation, e una lista non ordinata per il menú, come la semantica vuole. icon smile Menu animato con jquery Quindi passiamo allo stile del menú, nel style.css :

#navigation{
width: 200px;
}
#navigation ul{
list-style: none;
}
#navigation ul li{
height: 30px;
border-bottom: 1px dotted #ccc;
}
#navigation ul li a{
text-indent: 20px;
padding: 5px 0;
display: block;
height: 20px;
text-decoration: none;
color: #434343;
background-image: url(bull.png);
background-repeat: no-repeat;
background-position: 5px 6px ;
}
#navigation ul li a:hover{
background-color: #8E8963;
background-image: url(bull.png);
background-repeat: no-repeat;
background-position: 15px 6px ;
color: white;
}

Quindi passiamo a jquery, nell’esempio riportato ho messo il codice di jquery in un altra pagina a parte, menu.js, ecco il codice :

$(document).ready(function(){
var Duration = 150; //time in milliseconds

$(‘#navigation ul li a’).hover(function() {
$(this).animate({ paddingLeft: ’20px’ }, Duration);
}, function() {
$(this).animate({ paddingLeft: ’0px’ }, Duration);
});

});

Niente di nuovo nel codice, che comunque vi vado a spiegare, la priam parte ormai la conoscete giá, é fondamentale per permettere a Jquery di realizzare qualsiasi cosa solo una volta che il documento é stato caricato, poi dichiaro una variabile, duration, che useró per la durata, in millisecondi, dell’animazione, infine applico l’effetto, usando la funzione animata, per creare appunto animazioni personalizzate, e applico un padding di 20px al “li” in modo da dare l’effetto di “spostamento” verso destra del link.

Avrete notato che anche nel css, ho usato una immagine come sfondo (bull.png) insieme alla proprietá background-position, in modo da posizionare l’immagine di sfondo, seguendo i due assi X e Y, a mio piacimento, nel hover del link, l’immagino la faccio muovere verso destra come con il testo.

Magari farebbe piú effetto inserire direttamente l’immagine e farla muovere insieme al testo con il javascript, ho usato questa tecnica per perdere meno tempo, potrete modificare il tutto a vostro piacimento.

icon smile Menu animato con jquery

Per saperne di piú sopra la funzione animate di Jquery.

Visualizza demo online

Scarica sorgenti e esempio completo.

7 pensieri su “Menu animato con jquery”

  1. Ciao e grazie per l’articolo, molto simpatico…
    aggiungendo anche un minimo di controllo sullo scorrimento ed un eventuale zoom, tipo lightbox, sarebbe uno strumento veramente completo…
    se riesco a trovare due secondi magari lo implemento e te lo rigiro..
    a presto e complimenti per il Blog..

    ps. che ne dici di uno scambio link?

I commenti sono chiusi.