Come promesso, lasciamo per un attimo la teoria e passiamo alla pratica. In questa lezione, cercando di applicare un minimo quanto visto nelle lezioni precedenti, vi mostro come, con poche righe jQuery, sia possibile creare un menu di navigazione con drop down ed animazione.
Come ben saprete, jQuery fornisce un vasto set di funzioni capaci di realizzare effetti di animazione variegati con poche righe di codice. Iniziamo, però, con un pò di codice html evitando di ripetere la parte di codice html degli esempi precedenti in cui si includeva jQuery ecc
La parte html sarà composta solo da una lista, ancora non ordinata, di menu e sottomenu di navigazione.
<ul class="dropmenu">
<li class="nav"><a href="#">Sport</a>
<ul class="subnav">
<li><a href="#">Calcio</a></li>
<li><a href="#">Basket</a></li>
<li><a href="#">Golf</a></li>
<li><a href="#">Tennis</a></li>
</ul>
</li>
<li class="nav"><a href="#">Cultura</a>
<ul class="subnav">
<li><a href="#">Libri</a></li>
<li><a href="#">Cinema</a></li>
<li><a href="#">Teatro</a></li>
<li><a href="#">Arte</a></li>
</ul>
</li>
<li class="nav"><a href="#">Musica</a>
<ul class="subnav">
<li><a href="#">Rock</a></li>
<li><a href="#">Classica</a></li>
<li><a href="#">Lirica</a></li>
<li><a href="#">Pop</a></li>
</ul>
</li>
</ul>
Non servono ulteriori spiegazioni per il codice html appena visto e possiamo passare alla parte relativa al css.
In questo caso, colori e sfondi a parte, occorre aggiungere alcuni stili per nascondere la navigazione di secondo livello fino a che non si verifichi l’evento di mouseover.
ul.dropmenu{
color:#CCCCCC;
float:left;
font-size:11px;
padding:0;
width:560px;
}
ul.dropmenu li{
background:none repeat scroll 0 0 #333333;
border:2px solid #000000;
display:block;
float:left;
height:15px;
list-style:none outside none;
margin:0 5px;
padding:5px 0px;
text-align:center;
text-shadow:0 1px 1px #000000;
text-transform:uppercase;
width:130px;
position:relative;
}
ul.dropmenu li a{
color:#CCCCCC;
}
ul.dropmenu li ul{
background:none repeat scroll 0 0 #333;
border-bottom:3px solid #DE93C3;
float:left;
padding:20px 5px 0;
display: none;
position:absolute;
left:-50%;
width:250px;
margin-top:15px
}
ul.dropmenu li ul li{
border:none;
border-bottom:1px solid #ccc;
padding:5px;
float:left;
width:100px;
overflow:hidden
}
Da notare alcune cosette. Come avrete notato, abbiamo agito su tutti i selettori e identificatori e anche sugli elementi link (ul.dropmenu li a)
Inoltre, sfruttando la proprietà overflow:hidden riesco a nascondere l’elemento di sottomenu fino a che non si registra il passaggio del mouse sul blocco che contiene il sottomenu stesso.
Infine, come noterete, abbiamo usato, oltre alla proprietà overflow:hidden anche la display:none. Esiste una differenza fra le due. Con display:none un elemento non verrà proprio considerato e reso e quindi non occuperà alcuno spazio nell’economia della pagina. Con visibility:hidden un elemento non verrà mostrato, ma occuperà lo spazio di pagina proprio come se fosse visibile.
Infine, tanto perché un ripassino non fa mail male, ridate una bella letta all’articolo che parla di posizione statica, assoluta e relativa nei css considerando che nel codice appena visto se ne fa menzione.
Passiamo ora alla parte jQuery responsabile dell’animazione del menu con drop down.
$(document).ready(function() {
//mouseover su menu di primo livello
$("ul.dropmenu li.nav").mouseover(function(){
$(this).find('.subnav').stop().animate({height: '60px', opacity:'1'},{queue:false, duration:1500, easing: 'easeOutBounce'})
});
//quando si verifica il mouse out ...
$("ul.dropmenu li.nav").mouseout(function(){
$(this).find('.subnav').stop().animate({height:'0px', opacity:'0'},{queue:false, duration:1600, easing: 'easeOutBounce'})
});
//animazione con background color su ogni menu item
$("li").hover(function() {
$(this).stop().animate({ backgroundColor: "#C13D93"}, 600);},
function() {
$(this).stop().animate({ backgroundColor: "#333333" }, 600);
});
});
Come avrete intuito, per creare un menu del genere dobbiamo gestire due eventi ben precisi. Il primo si attua quando il puntatore del mouse arriva su uno dei blocchi di menu cosiddetti di primo livello (Sport, Cultura, Musica) cioè quelli con classe pari a nav.
Il secondo evento, logicamente, si rivela invece, quando il puntatore del mouse si allontana da uno dei blocchi di menu suddetti.
Riguardo al primo evento, si applica a tutti gli elementi con classe subnav, dapprima la funzione stop() (per fermare un eventuale accumulo coda di animazione qualora si sia ripetutamente mosso il mouse avanti e indietro sulla voce di menu) e,in seguito, la funzione animate(…) responsabile dell’effetto vero e proprio. Trovate qui la sintassi completa della funzione che riassumo essendo decisamente importante nell’economia di jQuery :
.animate( properties, [ duration ], [ easing ], [ complete ] )
La funzione prevede, come noterete, come primo parametro tutta una serie di proprietà css (opacity,height,backgroundColor, margin, border ecc), come secondo il tempo di durata dell’effetto (può essere una stringa o un numero) e come terzo il valore di easing. Tale parametro indica la velocità alla quale l’animazione deve avanzare nei diversi punti diversi e anche la modalità. Vi lascio questo link per vedere in azione solo alcuni dei possibili easing su jQuery. Infine, quarto parametro non obbligatorio, ovvero complete, può richiamare un’ulteriore funzione che si scatenerebbe ad animazione completata. Non é, comunque, il nostro caso.
Passando al secondo evento (mouse che si allontana), tutto é simile a quanto appena visto con la differenza che l’effetto é annullato poiché si pone : height:’0px’, opacity:’0′
Infine, l’effetto hover applicato su tutti gli item di meni che, come avrete notato, prevede una funzione relativa all’evento mouse in e una relativa all’evento mouse out
Eccovi una demo di quanto appena descritto. Grazie a devsnippet per lo spunto di esempio
