Come realizzare un menu a tendina

Le regole da seguire nella creazione di un dropdown menu usabile.

I menu a tendina sono un’ottima soluzione per rendere accessibili più pagine ai visitatori del sito. Possono essere realizzati usando solo i CSS o anche JavaScript, ma è comunque necessario rispettare alcune regole:

  • Le voci devono avere un’area estesa, comodamente selezionabile, per consentire una navigazione facile. Sono sconsigliate le etichette di testo troppo lunghe.
    Dropdown menu
  • E’ utile un ritardo di qualche frazione di secondo su apertura e chiusura del menu, per evitare attivazioni involontarie spostando il mouse
  • Il menu deve potersi riposizionare a seconda delle dimensioni della finestra del browser, spostandosi in un’area visibile quando si trova vicino ai margini della stessa. Un classico errore è mostrato nell’immagine:
    Un esempio di menu a tendina con comportamento errato, ai margini della finestra del browser.
  • All’apertura della tendina, l’utente deve vedere tutte le voci insieme, senza necessità di effettuare scroll della pagina
  • I link di primo livello devono avere una destinazione, che sarà utilizzata anche se il menu non è accessibile (ad esempio JavaScript disabilitato)
  • Un menu a tendina non è una mappa del sito, è inutile e dannoso elencare tutte le pagine
  • Le voci selezionate dall’utente all’interno del menu dovrebbero rimanere evidenti
    Menu con voci selezionate
  • Il menu dovrebbe essere perfettamente navigabile anche da tastiera
  • I menu realizzati esclusivamente con i CSS spesso sono poco usabili: a volte è meglio evitarli. Senza JavaScript infatti non è possibile gestire alcuni aspetti come il ritardo sull’apertura e sulla chiusura.
  • Con JavaScript disabilitato il sito deve essere comunque navigabile
  • Le voci dei sottomenu è bene che siano accessibili agli screen reader senza nasconderle con display: none (ma con position: absolute)

Queste regole andrebbero rispettate in ogni occasione: per alcune potrebbe essere concessa qualche eccezione a seconda delle circostanze, ma alcuni requisiti come l’usabilità sono fondamentali. Un menu a tendina deve essere facile da utilizzare, perchè è il mezzo principale per far navigare gli utenti nel vostro sito. In certi casi conviene mantenere un menu classico, se l’alternativa deve essere poco usabile.

Esempi di menu a tendina

Esistono diverse risorse disponibili per realizzare un menu a tendina senza troppi problemi. Non tutte però seguono i principi elencati: ve ne segnalo un paio. Potete usarle come un ottimo punto di partenza per i vostri siti:

Se conoscete altre risorse interessanti segnalatele pure nei commenti, le aggiungerò a questa lista.