jQueryParlando di menù a tendina, in rete sono disponibili un’infinità di guide per le più svariate procedure. In questi anni ho analizzato e testato molte di queste, restando quasi sempre insoddisfatto al punto da optare, in definitiva, verso soluzioni alternative (soprattutto “spalmare” i vari link su una sidebar, magari anche comprimibile).

Ora credo di aver trovato una soluzione valida, in base a questi criteri:

  • codice pulito, comprensibile, conforme alle regole dei validatori;
  • tecnologie, linguaggio di programmazione e meccanismi di funzionamenti non intrusivi;
  • possibilità di customizzazione, su necessità dell’utente.

Questa soluzione di chiama Superfish, un’estensione della più famosa libreria jQuery. Partiamo dall’analizzare la struttura html di un semplice menù orizzontale, senza tendine di sorta, solitamente strutturato tramite un elenco (cioè tramite gli elementi ul e li):

<ul>
	<li><a href="pagina1.html">Pagina 1</a></li>
	<li><a href="pagina2.html">Pagina 2</a></li>
	<li><a href="pagina3.html">Pagina 3</a></li>
</ul>

E anche le relative regole css, almeno quelle essenziali, qui ben documentate tramite commenti:

ul {
   background: red; /* il colore di sfondo, anche se per un uso reale sarebbe più carino un gradiente... */
   display: block; /* normalmente sarebbe un elemento "inline", definendolo come "block" ne avremo un miglior controllo, soprattutto per quanto riguarda dimensioni e spazi (margini e padding) */
   height: 30px; /* l'altezza del menù */
   line-height: 30px; /* l'allineamento verticale del menù, che dovrebbe avere lo stesso valore di "height" */
   list-style: none; /* rimuove lo stile tipico dei menù, visto che ne dovremmo fare un uso diverso dal canonico */
   padding: 0; /* rimuoviamo il padding */
}
li {
   float: left; /* rendiamo gli elementi del menù "flottanti", così che siano disposti l'unico affianco all'altro */
}
a {
   color: white; /* colore del testo dei link */
   display: block; /* vale quando già spiegato nel precedente, simile caso */
   padding: 0 10px; /* definendo un minimo padding (ma solo sui lati, per quanto riguarda sopra e sotto meglio lavorare sull'altezza di "ul"), creiamo dello spazio interno e intorno al testo dei collegamenti */
   text-decoration: none; /* togliamo la decorazione ai link (sarebbe la classica sottolineatura) */
}
a:hover { /* Effetti da applicare al passaggio del mouse */
   background: orange; /* in questo semplice caso, ci limitiamo a cambiare lo sfondo del singolo link su cui passiamo il mouse*/
}

Fin qui dovrebbe essere tutto semplice e chiaro. Potete testare quanto fin qui riportato da subito, il risultato sarà quello desiderato e cioè qualcosa di simile (il puntatore del mouse, qui non visibile, è sul terzo link):Semplice menù orizzontaleIl passo successivo è aggiungere un menù a tendina, e quindi un menù interno al menù, a questo nostro semplice menù orizzontale. Ecco le modifiche codice html:

<ul>
	<li><a href="pagina1.html">Pagina 1</a></li>
	<li>
            <a href="#">Pagina 2</a>
            <ul>
               <li><a href="paginaA.html">Pagina A</a></li>
               <li><a href="paginaA.html">Pagina B</a></li>
               <li><a href="paginaA.html">Pagina C</a></li>
            </ul>
        </li>
	<li><a href="pagina3.html">Pagina 3</a></li>
</ul>

A questo punto possiamo far entrare in azione Superfish: includiamo prima jQuery, poi proprio Superfish, infine “facciamo partire” quest’ultimo. Scarichiamo Superfish da qui (nel nostro esempio, è sufficiente solo il file superfish.js) e jQuery da qui, quindi tra i tag head del nostro documento inseriamo:

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="superfish.js"></script>
<script>
   $(document).ready(function() {
      $('ul.sf-menu').superfish();
   });
</script>

Molto semplicemente e come già accennato: viene incluso il file .js di jQuery (riga 1), poi quello di Superfish (riga 2), infine viene “fatto partire” Superfish (dalla riga 3 in poi). Qui possiamo, eventualmente, specificare delle opzioni per Superfish (l’elenco delle possibili opzioni è disponibile qui).
Alla riga 5 potete vedere, in chiaro, il riferimento all’elemento su cui dovrà agire Superfish (e più precisamente, in questo esempio, l’elemento ul con classe sf-menu). Capirete quindi che dobbiamo apportare un’altra (e ultima) modifica al nostro codice html, solo per quando riguarda il primo ul, che dovrà diventare così:

<ul class="sf-menu">
   <!-- tutto il resto che abbiamo già visto... -->
</ul>

Ora il sotto-menù verrà visualizzato solo quando richiesto, ma il risultato grafico non sarà ancora quello sperato. Dobbiamo infatti operare delle aggiunte alle regole css:

/* Regole valide SOLO per i sotto-menù */
ul ul {
	height: auto; /* ripristina l'altezza (il sotto-menù non deve avere un'altezza fissa) */
}
ul ul li {
	float: none; /* ripristina il floating (gli elementi del sotto-menù non deve essere affiancati) */
}

E quindi, ecco finalmente il risultato desiderato:Menù con tendinaIl codice html finale:

<ul class="sf-menu">
	<li><a href="pagina1.html">Pagina 1</a></li>
	<li>
            <a href="#">Pagina 2</a>
            <ul>
               <li><a href="paginaA.html">Pagina A</a></li>
               <li><a href="paginaA.html">Pagina B</a></li>
               <li><a href="paginaA.html">Pagina C</a></li>
            </ul>
        </li>
	<li><a href="pagina3.html">Pagina 3</a></li>
</ul>

E il codice css finale:

ul {
   background: red; /* il colore di sfondo, anche se per un uso reale sarebbe più carino un gradiente... */
   display: block; /* normalmente sarebbe un elemento "inline", definendolo come "block" ne avremo un miglior controllo, soprattutto per quanto riguarda dimensioni e spazi (margini e padding) */
   height: 30px; /* l'altezza del menù */
   line-height: 30px; /* l'allineamento verticale del menù, che dovrebbe avere lo stesso valore di "height" */
   list-style: none; /* rimuove lo stile tipico dei menù, visto che ne dovremmo fare un uso diverso dal canonico */
   padding: 0; /* rimuoviamo il padding */
}
li {
   float: left; /* rendiamo gli elementi del menù "flottanti", così che siano disposti l'unico affianco all'altro */
}
a {
   color: white; /* colore del testo dei link */
   display: block; /* vale quando già spiegato nel precedente, simile caso */
   padding: 0 10px; /* definendo un minimo padding (ma solo sui lati, per quanto riguarda sopra e sotto meglio lavorare sull'altezza di ul), creiamo dello spazio interno e intorno al testo dei collegamenti */
   text-decoration: none; /* togliamo la decorazione ai link (sarebbe la classica sottolineatura) */
}
a:hover { /* Effetti da applicare al passaggio del mouse */
   background: orange; /* in questo semplice caso, ci limitiamo a cambiare lo sfondo del singolo link su cui passiamo il mouse*/
}
ul ul {
	height: auto;
}

ul ul li {
	float: none;
}

Ah, un’ultima cosa. Secondo voi, cosa ho utilizzato per realizzare il menù di questo blog?

Espandi/comprimi Commenti

[…] già scritto qualcosa sui menù a tendina, arrivando a consigliare di utilizzare SuperFish, che a tutt’ora […]

XHTML - Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>