I menu di navigazione costituiscono una parte essenziale nel layout di un sito web. Se ben costruiti, aumentano di molto l’esperienza utente, favorendo l’accessibilità e l’usabilità delle pagine. In questo articolo tratteremo i più comuni tipi di menu di navigazione e le varie problematiche incontrate nella loro realizzazione con i CSS. [h=2]Scelta degli elementi[/h] Fondamentalmente un menu di navigazione non è altro che un insieme (o più insiemi) di link raggruppati secondo caratteristiche comuni. Poichè i link (elemento a) sono elementi inline, in linea teorica si potrebbe utilizzare qualsiasi contenitore di blocco per raggrupparli (div, p, ecc.).
In realtà la scelta ricade sempre sugli elenchi, e questo per alcune valide ragioni:
Dato che gli elenchi sono elementi di blocco, la loro formattazione predefinita si adatta particolarmente alla realizzazione di menu verticali. Viceversa, nel caso dei menu orizzontali occorre cambiare la formattazione predefinita degli elenchi al fine di visualizzare le voci sulla stessa riga.
Per quanto riguarda i menu a discesa, per realizzare l’effetto dell’apertura del menu occorre usare una combinazione di proprietà e di selettori che vedremo in seguito.
[h=2]Menu verticali[/h] Consideriamo questo codice (X)HTML:
[h=4]XML[/h]
(
Dall’esempio si nota come i link vengano posti uno sopra l’altro. Dato che l’elenco non ordinato segue la sua formattazione predefinita, ha un rientro ed un marcatore per ogni voce. Possiamo cominciare con l’eliminare il marcatore e il rientro, gestendo al contempo lo spazio intorno al menu, ed assegnando a quest’ultimo una dimensione:
[h=4]CSS[/h]
(
Dare una dimensione al menu (e come vedremo anche alle voci e ai link al suo interno) serve a prevenire alcuni problemi comuni in Internet Explorer Windows. Passiamo quindi a gestire le voci del menu:
[h=4]CSS[/h]
(
Abbiamo semplicemente distanziato le voci in verticale di 0.2em. A questo punto, per ottenere un tipico menu a blocchi, è necessario trasformare i link in elementi di blocco ed assegnare loro degli stili:
[h=4]CSS[/h]
(
Abbiamo usato la proprietà ‘display’ impostandola su ‘block’ per l’elemento a, a cui abbiamo assegnato una dimensione al fine di evitare malfunzionamenti in Internet Explorer Windows. Quindi abbiamo eliminato la sottolineatura dei link tramite la proprietà ‘text-decoration’, e successivamente abbiamo creato un effetto di rollover cambiando il colore del testo e lo sfondo sullo stato :hover.
Volendo aggiungere dei bordi al menu e alle voci, il codice sinora esaminato andrebbe modificato come segue:
[h=4]CSS[/h]
(
Il problema nasce quando vogliamo allineare il testo a sinistra e contemporaneamente aggiungere del padding per distanziarlo dai bordi. Poichè i link sono larghi quanto il blocco contenitore, questo causerà un allargamento del box, più evidente se abbiamo impostato un rollover. In questo caso è sufficiente impostare un padding per il blocco contenitore del menu, al fine di contenerne l’allargamento. Il padding dovrà essere uguale o superiore al padding impostato per i link.
Abbiamo sinora usato il padding per gestire lo spazio verticale del testo, ma è possibile usare anche un’altra soluzione:
[h=4]CSS[/h]
(
La centratura verticale del testo in un blocco si ottiene mediante due valori uguali per le proprietà ‘height’ e ‘line-height’. Il valore dell’altezza deve essere uguale al valore dell’interlinea, in modo da avere un eguale spazio sopra e sotto il testo. Dato che abbiamo reso i link come elementi di blocco, è possibile usare la proprietà ‘text-align’ per l’allineamento orizzontale del testo.
[h=2]Menu verticali avanzati[/h] Abbiamo visto come la formattazione di base di un menu verticale sia alquanto semplice da realizzare, fermo restando il fatto che vanno rispettate alcune regole di compatibilità con Internet Explorer Windows:
[h=4]CSS[/h]
(
Anche questa tecnica è relativamente semplice: si tratta di impostare un’immagine di sfondo sullo stato :hover del link usando la proprietà ‘background’. Il posizionamento dell’immagine deve essere tale da porla all’interno del blocco contenitore del link. In questo esempio abbiamo valori percentuali per la proprietà ‘background-position’, perchè garantiscono una certa flessibilità. Volendo si può realizzare con i CSS anche un preload delle immagini, al fine di velocizzare il rollover:
[h=4]CSS[/h]
In questo caso abbiamo impostato un valore negativo per la proprietà ‘background-position’, in modo che l’immagine non sia visibile sullo stato normale del link ma venga comunque caricata nella cache del browser. Si raccomanda di usare valori negativi, in quanto Safari ha dei problemi con valori positivi nel preload. Se infatti avessimo scritto:
[h=4]CSS[/h]
#menu a:link, #menu a:visited { background: transparent url("img/dar.gif") no-repeat 16em 0; } gli altri browser non avrebbero mostrato l’immagine, in quanto si trova fuori dal blocco contenitore dell’elemento, ma Safari l’avrebbe comunque resa visibile fuori dal elemento a.
Si noti come nell’esempio abbiamo specificato un indicatore di sezione, ossia una voce del menu formattata in modo diverso dalle altre per ricordare all’utente la sua posizione all’interno del sito. Abbiamo usato un elemento strong e non un elemento a, in quanto con i CSS disabilitati l’elemento a si confonderebbe con gli altri link, disorientando l’utente:
[h=4]CSS[/h]
Infine, se avessimo voluto scambiare le immagini al passaggio del mouse avremmo solo dovuto aggiungere le seguenti dichiarazioni:
[h=4]CSS[/h]
Il preload con i CSS è utile quando le immagini pesano da 1Kb in su, o quando vi sono più menu con diverse immagini di sfondo o più immagini di sfondo per lo stesso menu. In caso contrario si può anche omettere la procedura descritta sopra.
È possibile anche usare i bordi in modo dinamico, come mostrato in questo esempio:
[h=4]CSS[/h]
(
Abbiamo impostato un colore di partenza del bordo uguale a quello dello sfondo del menu (ed in questo caso anche della finestra di visualizzazione) per poi cambiarlo sullo stato :hover, creando l’effetto di un cursore che si sposta e di una sottolineatura per il blocco.
[h=2]Menu orizzontali[/h] Le tecniche sinora esposte si applicano anche ai menu orizzontali, ma con la differenza che nel caso di tali menu occorre cambiare le regole di visualizzazione per le voci. Se per i menu verticali non vi era bisogno di specificare una formattazione particolare per le voci, dato che gli elenchi si estendono per loro stessa natura in verticale, nel caso dei menu orizzontali occorre agire sulle voci usando la proprietà ‘float’ o la dichiarazione ‘display: inline’, a seconda delle esigenze e della tipologia di layout.
Vediamo un semplice esempio:
[h=4]CSS[/h]
(
La dichiarazione ‘display: inline’ per l’elemento li fa in modo che le voci vengano visualizzate affiancate. La dichiarazione ‘height: 0′ serve unicamente ad Internet Explorer 5 Windows, che di norma non riconosce margini, padding e bordi agli elementi inline a meno che questi non "abbiano layout" (secondo la terminologia inerente alla proprietà hasLayout di Explorer). Con questa dichiarazione Explorer 5 considera tali elementi come ibridi di blocco e inline, applicando loro le sopracitate proprietà. Tuttavia, i risultati non sono perfetti. La classe .last elimina il bordo dall’ultima voce del menu, creando una simmetria con la prima. La misura tra i link è di 0.5em, ossia il valore universalmente accettato nelle pratiche di accessibilità.
La soluzione con ‘display: inline’ viene usata soprattutto per la facilità con cui si possono allineare le voci del menu. Infatti, trattandosi di elementi inline è sufficiente usare la proprietà ‘text-align’. Purtroppo i problemi di compatibilità con Explorer 5 Windows sono così gravi che per ottenere un risultato compatibile spesso si è costretti ad aggiungere una notevole quantità di codice solo per Explorer.
Usare la proprietà ‘float’ è invece meno problematico. Il sopracitato esempio potrebbe essere così riscritto:
[h=4]CSS[/h]
(
Con il float dobbiamo necessariamente assegnare un’altezza al menu, o lo spazio verticale risulterebbe collassato. In questo caso abbiamo assegnato un valore di ‘line-height’ pari all’altezza per centrare il testo in verticale. Le voci di menu devono avere una larghezza esplicita, che deve essere proporzionale al contenuto testuale delle medesime. Lo svantaggio maggiore di questa tecnica consiste, a detta di molti, nella difficoltà di allineamento delle voci. Per esempio, per centrare le voci all’interno del menu dovremmo aggiungere il seguente codice:
[h=4]CSS[/h]
(
Abbiamo inserito il menu all’interno di un contenitore (#contenitore-menu), a cui abbiamo assegnato la dichiarazione ‘text-align: center’ per centrare il menu in Explorer 5 Windows. Quindi abbiamo assegnato al menu una larghezza esplicita (19%), che è ovviamente proporzionale al numero di voci del menu. Per centrare il menu sugli altri browser abbiamo impostato i suoi margini orizzontali su ‘auto’.
Nel caso in cui dovessimo allineare le voci su di un lato, il precedente codice andrebbe modificato come segue:
[h=4]CSS[/h]
(
In questo caso abbiamo fatto flottare il menu a destra e le sue voci a sinistra, avendo l’accortezza di impostare un’altezza per #contenitore-menu.
[h=2]Menu orizzontali avanzati[/h] Per i menu orizzontali avanzati vale quanto abbiamo visto per i menu verticali avanzati. Ad esempio, è possibile creare un rollover di immagini al passaggio del mouse:
[h=4]CSS[/h]
(
In questo caso anche l’elemento a è stato fatto flottare, al fine di trasformarlo in un elemento di blocco. Si noti come l’elemento a e l’elemento li siano dimensionati, avendo il primo una larghezza ed il secondo un’altezza (pari all’altezza del menu).
Si possono creare anche effetti di movimento, come nel seguente esempio:
[h=4]CSS[/h]
(
In questo caso abbiamo aumentato l’interlinea al passaggio del mouse al fine di creare l’abbassamento dinamico delle voci del menu. Da notare come l’elemento li, che ha il margine sinistro con valore 0.5em, abbia la dichiarazione ‘display: inline’, il cui unico scopo è quello di evitare il raddoppiamento del suddetto margine in Internet Explorer Windows.
Un altro effetto che possiamo creare è quello di un posizionamento verticale alternato delle voci del menu, come in questo esempio:
[h=4]CSS[/h]
(
In questo caso abbiamo creato la classe .basso che viene applicata in modo alternato alle voci di menu in modo da spingerle verso il basso tramite un margine superiore pari a 1em.
Infine, un effetto molto ricercato è quello di un menu con linguette (o tabs), come mostrato nel seguente esempio:
[h=4]CSS[/h]
Il codice aggiuntivo per Internet Explorer Windows:
[h=4]XML[/h]
(
Fondamentalmente, nella realizzazione di un menu a tabs occorre stabilire il corretto allineamento verticale delle voci del menu, spingendole a ridosso del bordo inferiore del menu fino a quando lo sfondo delle voci non copre tale bordo. Ovviamente le voci non devono avere un bordo inferiore.
[h=2]Menu a discesa[/h] I menu a discesa non sono altro che menu orizzontali o verticali che contengono a loro volta degli altri menu, ossia degli elenchi che contengono altri elenchi annidati al loro interno. Il codice (X)HTML visto sinora va quindi riscritto come segue:
[h=4]XML[/h]
Nei menu a discesa il dinamismo di apertura viene creato dalla pseudo-classe dinamica :hover applicata all’elemento li. Per nascondere e per mostrare il contenuto del sotto-menu si fa ricorso al posizionamento contestuale unito all’alternanza tra ‘display: none’ e ‘display: block’. Vediamo un esempio:
[h=4]CSS[/h]
(
Viene creato un posizionamento contestuale (‘position: relative’) sull’elemento li del menu principale. Quindi il sotto-menu all’interno dell’elemento li viene nascosto e formattato con le seguenti dichiarazioni:
[h=4]CSS[/h]
A questo punto, sfruttando il posizionamento contestuale appena creato e la pseudo-classe dinamica :hover sull’elemento li del menu principale, si fa comparire il sotto-menu dichiarandolo di blocco e posizionandolo in modo assoluto rispetto all’elemento li del menu principale:
[h=4]CSS[/h]
Poichè Internet Explorer 6 (ed inferiori) non supporta la pseudo-classe dinamica :hover sugli elementi diversi dai link, occorre dare a questo browser uno stile diverso per permettere agli utenti di poter visualizzare il sotto-menu:
[h=4]XML[/h]
Si possono creare menu che compaiono passando con il mouse sopra un’immagine, come in questo esempio:
[h=4]CSS[/h]
(
In questo caso, come nel precedente, il sotto-menu viene prima nascosto tramite ‘display: none’ e quindi rivelato su :hover tramite la dichiarazione ‘display: block’. Ancora una volta è necessario dare ad Explorer 6 (ed inferiori) del codice a parte:
[h=4]XML[/h]
Infine, è possibile combinare dinamicamente i menu orizzontali con quelli verticali, come mostrato da questo esempio:
[h=4]CSS[/h]
(
In questo esempio abbiamo usato le stesse tecniche viste in precedenza, con la differenza che è stata creata una classe .apri per l’elemento li del menu principale, al fine di visualizzare il sotto-menu solo su una determinata voce. Per indicare che tale voce contiene un sotto-menu, abbiamo usato un’immagine di sfondo sul link contenuto in essa. Internet Explorer 6 (ed inferiori) necessita del seguente codice aggiuntivo:
[h=4]XML[/h]
[h=2]Nota sui behavior HTC[/h] I menu a discesa visti in precedenza si sarebbero potuti rendere compatibili anche con Internet Explorer 6 (ed inferiori) tramite l’uso dei file .htc usando la seguente dichiarazione data tramite commenti condizionali:
[h=4]CSS[/h]
Purtroppo i file HTC hanno le seguenti controindicazioni:
[h=2]Accessibilità dei menu di navigazione[/h] Oltre all’uso delle accesskey, per garantire una buona accessibilità dei menu di navigazione si dovrebbe evitare di usare la dichiarazione list-style: none per gli elenchi non ordinati e ordinati e le voci di elenco, in quanto tale dichiarazione impedisce ai lettori di schermo di stabilire il corretto ordinamento delle voci. Per eliminare il marcatore di elenco, si usi invece display: block o display: inline per l’elemento li. Ringrazio Michele Diodati per la preziosa segnalazione.
Fonte:
gabrieleromanato.com
In realtà la scelta ricade sempre sugli elenchi, e questo per alcune valide ragioni:
- con i CSS disabilitati o non supportati, gli elenchi vengono resi in modo diverso rispetto ai comuni contenitori di blocco. Lynx ad esempio li visualizza con un rientro, ed aggiunge la numerazione per gli elenchi ordinati ed un asterisco come marcatore per quelli non ordinati.
- gli elenchi forniscono un ordine logico e semantico ai link. Per esempio, in un elenco di definizione l’elemento dt può contenere l’etichetta di una sezione, e l’elemento dd un elenco non ordinato di link che fanno riferimento a quella sezione, oppure dt può contenere un elemento a e dd ne fornisce la descrizione.
Dato che gli elenchi sono elementi di blocco, la loro formattazione predefinita si adatta particolarmente alla realizzazione di menu verticali. Viceversa, nel caso dei menu orizzontali occorre cambiare la formattazione predefinita degli elenchi al fine di visualizzare le voci sulla stessa riga.
Per quanto riguarda i menu a discesa, per realizzare l’effetto dell’apertura del menu occorre usare una combinazione di proprietà e di selettori che vedremo in seguito.
[h=2]Menu verticali[/h] Consideriamo questo codice (X)HTML:
[h=4]XML[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)Dall’esempio si nota come i link vengano posti uno sopra l’altro. Dato che l’elenco non ordinato segue la sua formattazione predefinita, ha un rientro ed un marcatore per ogni voce. Possiamo cominciare con l’eliminare il marcatore e il rientro, gestendo al contempo lo spazio intorno al menu, ed assegnando a quest’ultimo una dimensione:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)Dare una dimensione al menu (e come vedremo anche alle voci e ai link al suo interno) serve a prevenire alcuni problemi comuni in Internet Explorer Windows. Passiamo quindi a gestire le voci del menu:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)Abbiamo semplicemente distanziato le voci in verticale di 0.2em. A questo punto, per ottenere un tipico menu a blocchi, è necessario trasformare i link in elementi di blocco ed assegnare loro degli stili:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)Abbiamo usato la proprietà ‘display’ impostandola su ‘block’ per l’elemento a, a cui abbiamo assegnato una dimensione al fine di evitare malfunzionamenti in Internet Explorer Windows. Quindi abbiamo eliminato la sottolineatura dei link tramite la proprietà ‘text-decoration’, e successivamente abbiamo creato un effetto di rollover cambiando il colore del testo e lo sfondo sullo stato :hover.
Volendo aggiungere dei bordi al menu e alle voci, il codice sinora esaminato andrebbe modificato come segue:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)Il problema nasce quando vogliamo allineare il testo a sinistra e contemporaneamente aggiungere del padding per distanziarlo dai bordi. Poichè i link sono larghi quanto il blocco contenitore, questo causerà un allargamento del box, più evidente se abbiamo impostato un rollover. In questo caso è sufficiente impostare un padding per il blocco contenitore del menu, al fine di contenerne l’allargamento. Il padding dovrà essere uguale o superiore al padding impostato per i link.
Abbiamo sinora usato il padding per gestire lo spazio verticale del testo, ma è possibile usare anche un’altra soluzione:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)La centratura verticale del testo in un blocco si ottiene mediante due valori uguali per le proprietà ‘height’ e ‘line-height’. Il valore dell’altezza deve essere uguale al valore dell’interlinea, in modo da avere un eguale spazio sopra e sotto il testo. Dato che abbiamo reso i link come elementi di blocco, è possibile usare la proprietà ‘text-align’ per l’allineamento orizzontale del testo.
[h=2]Menu verticali avanzati[/h] Abbiamo visto come la formattazione di base di un menu verticale sia alquanto semplice da realizzare, fermo restando il fatto che vanno rispettate alcune regole di compatibilità con Internet Explorer Windows:
- il menu e le sue voci devono avere una dimensione dichiarata. Anche se, di norma, la dimensione non dichiarata di un elemento di blocco viene calcolata automaticamente partendo dalla dimensione di un antenato, questo non vale in Explorer, che aggiungerà dello spazio verticale tra le voci e non estenderà l’area cliccabile del link a tutto il blocco.
- si eviti di esprimere il padding in percentuale. Valori di questo tipo possono causare in Explorer il cosiddetto jump on :hover, ossia il riflusso degli elementi della pagina.
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)Anche questa tecnica è relativamente semplice: si tratta di impostare un’immagine di sfondo sullo stato :hover del link usando la proprietà ‘background’. Il posizionamento dell’immagine deve essere tale da porla all’interno del blocco contenitore del link. In questo esempio abbiamo valori percentuali per la proprietà ‘background-position’, perchè garantiscono una certa flessibilità. Volendo si può realizzare con i CSS anche un preload delle immagini, al fine di velocizzare il rollover:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
[h=4]CSS[/h]
#menu a:link, #menu a:visited { background: transparent url("img/dar.gif") no-repeat 16em 0; } gli altri browser non avrebbero mostrato l’immagine, in quanto si trova fuori dal blocco contenitore dell’elemento, ma Safari l’avrebbe comunque resa visibile fuori dal elemento a.
Si noti come nell’esempio abbiamo specificato un indicatore di sezione, ossia una voce del menu formattata in modo diverso dalle altre per ricordare all’utente la sua posizione all’interno del sito. Abbiamo usato un elemento strong e non un elemento a, in quanto con i CSS disabilitati l’elemento a si confonderebbe con gli altri link, disorientando l’utente:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
È possibile anche usare i bordi in modo dinamico, come mostrato in questo esempio:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)Abbiamo impostato un colore di partenza del bordo uguale a quello dello sfondo del menu (ed in questo caso anche della finestra di visualizzazione) per poi cambiarlo sullo stato :hover, creando l’effetto di un cursore che si sposta e di una sottolineatura per il blocco.
[h=2]Menu orizzontali[/h] Le tecniche sinora esposte si applicano anche ai menu orizzontali, ma con la differenza che nel caso di tali menu occorre cambiare le regole di visualizzazione per le voci. Se per i menu verticali non vi era bisogno di specificare una formattazione particolare per le voci, dato che gli elenchi si estendono per loro stessa natura in verticale, nel caso dei menu orizzontali occorre agire sulle voci usando la proprietà ‘float’ o la dichiarazione ‘display: inline’, a seconda delle esigenze e della tipologia di layout.
Vediamo un semplice esempio:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)La dichiarazione ‘display: inline’ per l’elemento li fa in modo che le voci vengano visualizzate affiancate. La dichiarazione ‘height: 0′ serve unicamente ad Internet Explorer 5 Windows, che di norma non riconosce margini, padding e bordi agli elementi inline a meno che questi non "abbiano layout" (secondo la terminologia inerente alla proprietà hasLayout di Explorer). Con questa dichiarazione Explorer 5 considera tali elementi come ibridi di blocco e inline, applicando loro le sopracitate proprietà. Tuttavia, i risultati non sono perfetti. La classe .last elimina il bordo dall’ultima voce del menu, creando una simmetria con la prima. La misura tra i link è di 0.5em, ossia il valore universalmente accettato nelle pratiche di accessibilità.
La soluzione con ‘display: inline’ viene usata soprattutto per la facilità con cui si possono allineare le voci del menu. Infatti, trattandosi di elementi inline è sufficiente usare la proprietà ‘text-align’. Purtroppo i problemi di compatibilità con Explorer 5 Windows sono così gravi che per ottenere un risultato compatibile spesso si è costretti ad aggiungere una notevole quantità di codice solo per Explorer.
Usare la proprietà ‘float’ è invece meno problematico. Il sopracitato esempio potrebbe essere così riscritto:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)Con il float dobbiamo necessariamente assegnare un’altezza al menu, o lo spazio verticale risulterebbe collassato. In questo caso abbiamo assegnato un valore di ‘line-height’ pari all’altezza per centrare il testo in verticale. Le voci di menu devono avere una larghezza esplicita, che deve essere proporzionale al contenuto testuale delle medesime. Lo svantaggio maggiore di questa tecnica consiste, a detta di molti, nella difficoltà di allineamento delle voci. Per esempio, per centrare le voci all’interno del menu dovremmo aggiungere il seguente codice:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)Abbiamo inserito il menu all’interno di un contenitore (#contenitore-menu), a cui abbiamo assegnato la dichiarazione ‘text-align: center’ per centrare il menu in Explorer 5 Windows. Quindi abbiamo assegnato al menu una larghezza esplicita (19%), che è ovviamente proporzionale al numero di voci del menu. Per centrare il menu sugli altri browser abbiamo impostato i suoi margini orizzontali su ‘auto’.
Nel caso in cui dovessimo allineare le voci su di un lato, il precedente codice andrebbe modificato come segue:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)In questo caso abbiamo fatto flottare il menu a destra e le sue voci a sinistra, avendo l’accortezza di impostare un’altezza per #contenitore-menu.
[h=2]Menu orizzontali avanzati[/h] Per i menu orizzontali avanzati vale quanto abbiamo visto per i menu verticali avanzati. Ad esempio, è possibile creare un rollover di immagini al passaggio del mouse:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)In questo caso anche l’elemento a è stato fatto flottare, al fine di trasformarlo in un elemento di blocco. Si noti come l’elemento a e l’elemento li siano dimensionati, avendo il primo una larghezza ed il secondo un’altezza (pari all’altezza del menu).
Si possono creare anche effetti di movimento, come nel seguente esempio:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)In questo caso abbiamo aumentato l’interlinea al passaggio del mouse al fine di creare l’abbassamento dinamico delle voci del menu. Da notare come l’elemento li, che ha il margine sinistro con valore 0.5em, abbia la dichiarazione ‘display: inline’, il cui unico scopo è quello di evitare il raddoppiamento del suddetto margine in Internet Explorer Windows.
Un altro effetto che possiamo creare è quello di un posizionamento verticale alternato delle voci del menu, come in questo esempio:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)In questo caso abbiamo creato la classe .basso che viene applicata in modo alternato alle voci di menu in modo da spingerle verso il basso tramite un margine superiore pari a 1em.
Infine, un effetto molto ricercato è quello di un menu con linguette (o tabs), come mostrato nel seguente esempio:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Il codice aggiuntivo per Internet Explorer Windows:
[h=4]XML[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)Fondamentalmente, nella realizzazione di un menu a tabs occorre stabilire il corretto allineamento verticale delle voci del menu, spingendole a ridosso del bordo inferiore del menu fino a quando lo sfondo delle voci non copre tale bordo. Ovviamente le voci non devono avere un bordo inferiore.
[h=2]Menu a discesa[/h] I menu a discesa non sono altro che menu orizzontali o verticali che contengono a loro volta degli altri menu, ossia degli elenchi che contengono altri elenchi annidati al loro interno. Il codice (X)HTML visto sinora va quindi riscritto come segue:
[h=4]XML[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)Viene creato un posizionamento contestuale (‘position: relative’) sull’elemento li del menu principale. Quindi il sotto-menu all’interno dell’elemento li viene nascosto e formattato con le seguenti dichiarazioni:
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
[h=4]XML[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)In questo caso, come nel precedente, il sotto-menu viene prima nascosto tramite ‘display: none’ e quindi rivelato su :hover tramite la dichiarazione ‘display: block’. Ancora una volta è necessario dare ad Explorer 6 (ed inferiori) del codice a parte:
[h=4]XML[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
)In questo esempio abbiamo usato le stesse tecniche viste in precedenza, con la differenza che è stata creata una classe .apri per l’elemento li del menu principale, al fine di visualizzare il sotto-menu solo su una determinata voce. Per indicare che tale voce contiene un sotto-menu, abbiamo usato un’immagine di sfondo sul link contenuto in essa. Internet Explorer 6 (ed inferiori) necessita del seguente codice aggiuntivo:
[h=4]XML[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
[h=4]CSS[/h]
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
- Se il Service Pack 2 è installato su Windows, il file .htc funzionerà in Internet Explorer 6 solo se servito col il MIME type
text/x-component . È necessario contattare l’amministratore del server per le eventuali modifiche.
- Internet Explorer avrà problemi se il suo livello di sicurezza è impostato su Alto. Per questo si raccomanda l’uso dell’elemento noscript all’interno del commento condizionale.
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.[h=2]Accessibilità dei menu di navigazione[/h] Oltre all’uso delle accesskey, per garantire una buona accessibilità dei menu di navigazione si dovrebbe evitare di usare la dichiarazione list-style: none per gli elenchi non ordinati e ordinati e le voci di elenco, in quanto tale dichiarazione impedisce ai lettori di schermo di stabilire il corretto ordinamento delle voci. Per eliminare il marcatore di elenco, si usi invece display: block o display: inline per l’elemento li. Ringrazio Michele Diodati per la preziosa segnalazione.
Fonte:
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
gabrieleromanato.com