CSS  »  Articoli  »  CSS Menu 

Le soluzioni basate esclusivamente su CSS rappresentano un'ottima scelta per la costruzione di menu gerarchici di navigazione all'interno di un sito web: importanti vantaggi dati dal loro uso riguardano soprattutto gli aspetti legati all'accessibilità, poiché sono costruiti in modo semanticamente corretto (mediante liste non ordinate), non richiedono plugin o supporto Javascript del browser e, conseguenza naturale, consentono spesso un caricamento più veloce della pagina rispetto ad altre soluzioni ibride (CSS + Javascript) oppure completamente realizzate in Javascript o Flash.

Una soluzione di questo tipo necessita tuttavia di una buona conoscenza dell'uso dei fogli di stile, soprattutto per via dei commenti condizionali necessari per il corretto funzionamento su Internet Explorer. Alcuni menu però (soprattutto quelli a due soli livelli di navigazione) non sono estremamente complessi e in rete è possibile trovare diverse risorse da cui poter attingere, tra le quali citiamo CSSPlay creato da Stuart Nicholls (http://www.cssplay.co.uk/) e dal cui sito prenderemo un semplice menu di esempio per questo articolo.

è necessario sottolineare che, sebbene questi menu presentino i vantaggi elencati in precedenza, per la natura del loro funzionamento, non possono tenere in considerazione un importante aspetto, quello dell'usabilità.

Com'è noto, il meccanismo dei menu CSS si basa fondamentalmente sulla pseudoclasse :hover (sugli elementi <a> in Internet Explorer 6 ed inferiori, sui list-items <li> per tutti gli altri browser).

Il tempo di risposta dell'evento da parte dei vari user-agent è pressoché immediato, il che significa che se l'utente, portando il mouse da una voce di primo livello alle voci di secondo di livello, esce inavvertitamente dall'area gestita dalla pseudoclasse, le voci di secondo livello si chiuderanno (o cambieranno) istantaneamente.

Ciò costringerà l'utente a riposizionare il mouse nuovamente sul menu ed effettuare una seconda volta la selezione della voce. Per molti questa potrà sembrare solo un'operazione ripetitiva ma, per chi non usa abitualmente il web o per persone con ridotta capacità d'attenzione, questa situazione può diventare frustrante e rappresentare un ostacolo alla fruizione dei contenuti.

A tale proposito possiamo intervenire attraverso Javascript non intrusivo - ed in modo relativamente semplice - per migliorare la user-experience. Il nostro scopo sarà quindi quello di ritardare di un certo quanto di tempo - definibile a piacere - l'evento onmouseover (e, analogamente, quello di onmouseout) in modo tale da tollerare brevi istanti nei quali l'utente possa uscire dall'area gestita dall'hover di una determinata voce di primo livello. Ecco la demo.

Altri articoli

Altre guide

Altre newsletter