Negli ultimi anni abbiamo assistito ad un susseguirsi di novità nell'ambito dei framework JavaScritp; questi ultimi si sono rivolti ai web designer non solo consentendo uno sviluppo più veloce delle applicazioni, ma anche con la possibilità di ampliare la compatibilità verso differenti browser.
Tra di essi è sicuramente jQuery quello che per varie ragioni sta riscuotendo un maggiore successo; per esempio perché permette un approccio diverso alla programmazione JavaScript, andando a sostituire alcune vecchie funzioni che creavano problemi di compatibilità con strutture più cross-browser; perché permette di ottenere grandi risultati con piccoli interventi, riuscendo a “comprimere” lunghe porzioni di codice in poche righe, facendo risparmiare tempo e ottimizzando velocità di esecuzione. Inoltre, jQuery può essere esteso con l'ausilio di plugin, alcuni molto interessanti: proprio uno di questi sarà alla base di questo tutorial.
Effetto smooth
Il menu che andremo a realizzare avrà come caratteristica quella di aprirsi con un effetto che fino a qualche tempo fa era tipico del mondo Flash. Si tratta dell'effetto definito smooth; secondo l'Adobe Developer Center:
"Il termine si riferisce ad una graduale accelerazione o decelerazione nel corso di una animazione che aiuta l'animazione ad apparire più realistica."
Per arrivare al risultato finale del tutorial utilizzeremo il plugin jQuery Easing, che ci permetterà di ottenere un effetto smooth molto simile a quello ottenibile in Flash.
Struttura
Prima d'iniziare con il nostro progetto dobbiamo definire la struttura del menu HTML e di tutti i file che andremo ad adoperare. Per comodità e abitudine ho creato un file XHTML di esempio nella root principale e poi le directory CSS, JS e IMG che andranno a contenere rispettivamente il foglio di stile, i file JavaScript e le immagini utilizzate.
Iniziamo ad analizzare il codice della sezione head della pagina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Esempio menu con jQuery</title> <link href="css/styles.css" rel="stylesheet" type="text/css" /> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/menu.js" type="text/javascript"></script> </head>
Come si può intuire facilmente eseguamo un richiamo diretto al foglio di stile contenuto all'interno della cartella CSS, mentre per richiamare il framework jQuery impostiamo l'URL assoluto del file che risiede su Google Code. Gli altri due file richiamati fanno riferimento al plugin jQuery Easing e al file JavaScript che controllerà l'esecuzione del menu; questi due sono entrambi posizionati nella directory JS.
A questo punto abbiamo tutto quello che ci serve per iniziare.
Il menu
Creiamo il nostro menu utilizzando le ormai stranote capacità delle liste, alle quali, successivamente, andremo ad applicare lo stile:
<body>
<p>Passa il mouse sul menu per farlo espandere.</p>
<ul>
<li class="home">
<p><a href="#">Home</a></p>
<p class="subtext">La prima pagina</p>
</li>
<li class="about">
<p><a href="#">Chi siamo</a></p>
<p class="subtext">Maggiori informazioni</p>
</li>
<li class="servizi">
<p><a href="#">Servizi</a></p>
<p class="subtext">Quello che possiamo fare</p>
</li>
<li class="contatti">
<p><a href="#">Contatti</a></p>
<p class="subtext">Rispondiamo subito</p>
</li>
</ul>
</body>
La scelta di creare delle classi per ogni elemento del menu serve per controllare la grafica che andremo ad aggiungere con l'ausilio dei CSS; inoltre, ogni elemento del menu presenta una classe .subtext che risulta visibile solo al passaggio del mouse sulla voce di riferimento.
Gli stili
Adesso che abbiamo la struttura del menu possiamo concentraci sulla presentazione tramite i CSS. Ecco il codice:
body {
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
}
ul {
margin:0;
padding:0;
}
li {
width:120px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
a {
color:#FFF;
text-decoration:none;
}
p { padding:0px 5px;}
.subtext { padding-top:10px;}
.home { background: url('../img/home-bg.gif') top left no-repeat;}
.about { background: url('../img/about-bg.gif') top left no-repeat;}
.servizi { background: url('../img/servizi-bg.gif') top left no-repeat;}
.contatti { background: url('../img/contatti-bg.gif') top left no-repeat;}
Come vediamo, l'overflow è stato impostato su ogni elemento li, questo per far sì che i sottotitoli corrispondenti non vengano visualizzati sino a quando non ci si passa sopra con il mouse e quindi l'altezza sia modificata. Inoltre, questa scelta è stata fatta anche nell'ottica di un blocco dei JavaScript lato client: in questo scenario riusciremo comunque ad avere un menu funzionante ed esteticamente gradevole seppur privo d'animazione.
Animazione e immagini
Possiamo a questo punto animare il nostro menu; abbiamo già creato il riferimento al framework jQuery e al suo plugin jQuery Easing, adesso andremo a lavorare sul file menu.js che controllerà il comportamento del menu all'interno del browser:
$(document).ready(function(){
//Rimuove il outline dai link
$("a").click(function(){
$(this).blur();
});
//Quando vi passa sopra il muose
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing:
'easeOutBounce'})
});
//Quando il mouse si allontana
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing:
'easeOutBounce'})
});
});
Nel codice ci sono due azioni principali. La prima è legata all'elemento li e al fatto che quando ci si passa sopra il mouse inizia l'espansione sino a 150px in un tempo di 0,6 secondi; l'effetto di rimbalzo invece è creato dal plugin tramite 'easeOutBounce', sia in espansione che in rilascio.
La seconda azione è legata all'allontanamento del mouse, con un rientro sino ai 50px nello stesso tempo ed anche qui vi è un leggero rimbalzo.
Il metodo stop() è posizionato su entrambe le azioni davanti all'.animate per impedire un ciclo di animazioni continue del menu nel caso ci si passasse sopra il mouse rapidamente.
Ovviamente, se decidete di adoperare questo menu all'interno di un sito web, con queste impostazioni ogni elemento li subirà tali comportamenti: per ovviare a questo comportamento è sufficiente adoperare dei selettori diversi con i CSS.
Abbiamo infine aggiunto le immagini per ogni elemento del menu, sia per evidenziare le possibilità grafiche, sia
per dare lo spunto a voi di sperimentare differenti soluzioni. Rivediamo l'esempio.
Tutti i file utilizzati sono disponbili per il download.
