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.

Passiamo alla realizzazione, non perdo tempo su come scaricare e linkare Jquery nei vostri documenti, dovrebbe essere scontato, 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. 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.

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

Visualizza demo online

Scarica sorgenti e esempio completo.

Popularity: 5% [?]

Potrebbero interessarti anche :

• Menu a scorrimento verticale con css e jquery (18)
• Uno slideshow ancora con jquery (3)
• Una gallery animata con jquery e css (6)
• Inviare una mail con php ajax e jquery in stile facebook (10)
• Realizzare layout compatibili con internet explorer 6 (17)
• Tooltip con jquery (14)
• Riconoscere il browser con javascript (7)
• Auguri di Natale con Css (5)
• Reset Css (0)
• Date con Javascript (0)