L’articolo (in lingua inglese) proviene da A List Apart ed è stato tradotto e riprodotto per gentile concessione dell’autore Nick Rigby.

Chiunque abbia creato un menù Drop-Down avrà certamente familiarità con la grande quantità di script che i menù tipicamente richiedono. Ma usando HTML e il semplice CSS è possibile creare un Drop-Down menù facile da modificare e da aggiornare e che funziona con ogni browser, compreso Internet Explorer. In più,non è richiesto nessun codice JavaScript (in realtà è richiesto un piccolo JavaScript ma non è nulla di difficile).

Qui di seguito vi è un anteprima del menù in azione.

Creare il menù

La prima e più importante fase della creazione di un menù è la struttura del menù stesso. Il miglior modo per farlo è costruire una lista ordinata, in cui ogni sub-menù appare a sua volta come una lista dentro la voce del menù principale a cui corrisponde. Sembra complicato,invece è n processo semplice e diretto:

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Offices</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Internet Marketing</a></li>
        <li><a href="#">Hosting</a></li>
        <li><a href="#">Domain Names</a></li>
        <li><a href="#">Broadband</a></li>
      </ul>
    </li>
    <li><a href="#">Contact Us</a>
      <ul>
        <li><a href="#">United Kingdom</a></li>
        <li><a href="#">France</a></li>
        <li><a href="#">USA</a></li>
        <li><a href="#">Australia</a></li>
      </ul>
    </li>
 </ul>

Questo è tutto,si può arrivare a questo risultato con un po’ di HTML (semplice da usare e da modificare).

Diamogli un po’ di stile

Ora aggiungiamo un po’ di stile alla lista del menù. Il primo passo è di rimuovere le imperfezioni dalla lista ordinata creata prima, bisogna cioè definire la larghezza del nostro menù.

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    }

Poi dobbiamo posizionare il nostro menù. Fortunatamente questo verrà posizionato verticalmente di default ,e questo è ciò che ci serve. Ora dobbiamo disporre la posizione come relative perché dobbiamo ovviamente posizionare i sub-menù dentro il menù principale.

ul li {
       position: relative;
       }

Il prossimo passo sono i sub-menù. Noi vogliamo che ogni sub-menù appaia alla destra della lista del menù principale quando ci si passa sopra con il mouse.

li ul {
       position: absolute;
       left: 149px;
       top: 0;
       display: none;
       }

Usando i parametri “left” e “top” possiamo posizionare ogni sub-menù dentro la voce del menù principale. Noterai che ho predisposto il parametro “left” a 149 px ( 1 px in meno della larghezza del menù principale), e ciò permette al sub-menù di sovrapporsi perfettamente al menù principale senza che si visualizzino antiestetici doppi bordi. Abbiamo anche disposto il display su “none” per far si che il sub-menù non sia visibile di default.

Quindi ora abbiamo il framework,ma è ancora troppo grezzo. Vedremo ora come arricchirlo maggiormente:

ul li a {
          display: block;
          text-decoration: none;
          color: #777;
          background: #fff;
          padding: 5px;
          border: 1px solid #ccc;
          border-bottom: 0;
          }

Io ho modificato i links secondo i miei gusti, ma possono essere cambiati come preferite e meglio credete. E’ importante inoltre disporre il display su “block” così permettiamo ad ogni link di occupare tutto lo spazio disponibile nel sub-menù.

In questo modo le cose appaiono un pochino meglio, anche se gli utenti di Internet Explorer potrebbero avere dei problemi. Sfortunatamente Internet Explorer interpreta la linea di separazione tra le voci del menù come uno spazio, quindi sotto IE questo menù non si impila ordinatamente. Esiste comunque un modo per aggirare questo bug:

/* Fix IE. Hide from IE Mac */
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

Possiamo applicare l’ Holly Hack qui sopra, così nasconde queste regole sotto tutti i browser, eccetto Internet Explorer. Perfetto. Avrai sicuramente notato che come regola height: 1% per far adattare bene il tutto. Sfortunatamente il “float fix ” smaschera un altro bug di Internet Explorer, che richiede un ben determinato valore di altezza per mostrare i links come blocchi. Noterai anche che ci sarà bisogno di chiudere il menù, e ciò si fa aggiungendo il bordo mancante sul fondo della lista. Quindi diventa:

ul {
     margin: 0;
     padding: 0;
     list-style: none;
     width: 150px;
     border-bottom: 1px solid #ccc;
     }

Con un po’ di fortuna tutti saranno in grado di vedere il menù ultimato.

Facciamolo funzionare

Ora dobbiamo vedere se funziona, bisogna far apparire il sub-menù quando scorriamo il mouse sul menù principale:

li:hover ul { display: block; }

Voila…questo è bare bones menu in azione.

Ok, Ok, però per chi ha Internet Explorer non andrà così liscio; infatti Internet Explorer permette che solo la pseudo-classe :hover sia applicabile al link così il li:hover permette ad Internet Explorer di visualizzare i sub-menù in maniera ordinata e giusta.

Adesso è il momento di lavorare su JavaScript che permette di forzare IE a far funzionare il menù:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over ";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over ", "");
   }
   }
  }
 }
}
window.onload=startList;

Un grande ringraziamento và a Patrick Griffiths e Dan Webb, per avermi ispirato in un precedente articolo di ALA, Suckerfish Dropdowns. Grazie, veramente!

Bene, così la regola hover ora diventa:

li:hover ul, li.over ul {
            display: block; }

In più adesso dobbiamo associare JavaScript con il comando ul, come segue:

<ul id="nav">

Ora, con un po’ di fortuna, sarà possibile vedere il menù in azione.

IE5.01 Jumping Menu Bug

Chiunque usi Internet Explorer 5.01 su Windows noterà che il menù non viene visualizzato correttamente quando lo si scorre. Il problema si può tranquillamente ovviare modificando il nostro precedente Hack come di seguito:

/* Fix IE. Hide from IE Mac */
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

Il misterioso Bug di Internet Explorer 6.0

Oltre i precedenti problemi di Internet Explorer, ho scoperto uno strano bug che sembra essere solo apparente in IE6. Uno sfondo deve essere dichiarato nel link, in caso contrario quando un sub-menù viene visualizzato, i links cominciano a scomparire prima che abbia il tempo di cliccarci sopra! Magari è un mio problema, verificatelo sul vostro Pc.

Personalizzarlo

Ora il “peggio” è fatto, non ti resta che personalizzarlo come vuoi tu. Giusto per darti un idea qui di seguito c’è una mia personale creazione.