Realizzare in jQuery un menù a tendina semplice, cross-browser, ad un solo livello di profondità, richiede veramente poco tempo e conoscenze tecniche minime. Useremo infatti due funzioni semplicissime, ovvero: slideUp() e slideDown(). L’unico vero “ostacolo” di sempre è la resa gradevole su tutti i browser, soprattutto su IE6.
Il markup html
Il codice html che utilizziamo sarà molto semplice, useremo infatti delle semplici liste per creare le nostre voci di menù. Prepariamo già alcune voci con le classi first e last, che ci permettono, via css, di attribuire ad esse alcune proprietà grafiche distintive.
<ul id="nav"> <li class="first"><a href="#">Voce 01</a></li> <li><a class="selected" href="#">Voce 02</a> <ul> <li><a href="#">Sottovoce Menu Numero 01</a></li> <li><a href="#">Sottovoce Menu Numero 02</a></li> <li class="last"><a href="#">Sottovoce Menu Numero 03</a></li> </ul> </li> <li><a href="#">Voce 03</a> <ul> <li><a href="#">Sottovoce Menu Numero 04</a></li> <li><a href="#">Sottovoce Menu Numero 05</a></li> <li><a href="#">Sottovoce Menu Numero 06</a></li> <li class="last"><a href="#">Sottovoce Menu Numero 07</a></li> </ul> </li> <li class="last"><a href="#">Voce 04</a></li> </ul>
Il css del menù
Del codice CSS che utilizziamo è bene sottolineare:
- Utilizzo della proprietà block sui link in modo che prendano la larghezza dei li in cui sono contenuti
- Trasformazione dei <li> in elementi di blocco con
float:left - Utilizzo di CSS3 per arrotondare i bordi (border-radius) e di transizioni al passaggio del mouse (webkit-transition)
- Mini-fix per IE6 (meglio includerlo in un foglio stile separato!)
Per il resto si tratta di decorazioni grafiche adattabili ai propri gusti!
body { font-family:arial; font-size:11px; } #nav { margin:0; padding:0; list-style:none; } #nav li { float:left; display:block; width:100px; background:#E0E0E0; position:relative; z-index:500; margin:0 1px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } #nav li.first { -moz-border-radius:5px 0 0 5px; -webkit-border-radius:5px 0 0 5px; border-radius:5px 0 0 5px; } #nav li.last { -webkit-border-radius:0 5px 5px 0; -moz-border-radius:0 5px 5px 0; border-radius:0 5px 5px 0; } #nav li li.last { -webkit-border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; } #nav li a { display:block; padding:8px 5px 0 5px; font-weight:700; height:23px; text-decoration:none; text-align:center; color:#333; } #nav li a:hover { color:#C00; } #nav li li:hover { -webkit-transform: translate(+10px,0); } #nav a.selected { color:#C00; } #nav ul { position:absolute; left:0; display:none; margin:0 0 0 -1px; padding:0; list-style:none; } #nav ul li { width:100px; float:left; border-top:1px solid #fff; } #nav ul a { display:block; height:auto; padding: 8px 5px; color:#666; } /* fix ie6, meglio inserirlo in un file .css separato */ *html #nav ul { margin:0 0 0 -2px; }
Il codice jQuery per animare l’effetto di discesa a tendina
Come anticipato in precedenza, il codice jQuery da utilizzare per rendere l’effetto desiderato sarà molto semplice:
$(document).ready(function () { $('#nav li').hover( function () { //mostra sottomenu $('ul', this).stop(true, true).delay(50).slideDown(100); }, function () { //nascondi sottomenu $('ul', this).stop(true, true).slideUp(200); } ); });
Come vedete le funzioni slideUp() e slideDown() sono situate all’interno della funzione hover(). Questo perchè questa funzione permette di considerare, all’interno di essa, due stati: uno stato di mouseover ed un secondo stato di mouseout. Quindi, quello che farà nel nostro caso sarà di:
- Far scendere la tendina al mouseover del <li> su cui sto passando, che contiene le sottovoci
- Far risalire la tendina al mouseout (quando il mouse esce dall’elemento lista)
100 è il tempo, espresso in millisecondi, in cui avviene la transizione. La funzione .stop() invece impedisce di eseguire a ripetizione l’azione e, con il trick della funzione delay() andiamo ad impedire che un passaggio troppo veloce sulla voce di menù causi l’effetto di rimbalzo!
Semplice no?
