MENU GRAFICI CON ROLLOVER
È importante orientare l'utente nella navigazione.
Prima di addentrarci nella realizzazione pratica dei menu, una piccola introduzione sull'usabilità di un menu di navigazione. Ci sono alcuni principi di cui si dovrebbe tenere sempre conto:
• l'utente dovrebbe poter capire facilmente dove può andare: è quindi indispensabile avere una navigazione chiara e ben distinta dal resto della pagina, sia a livello spaziale che di colore;• è importante distinguere i link al passaggio del mouse: questo per far capire all'utente che il cambiamento di stato del link, grazie al rollover, indica un possibile cambiamento di pagina;
• l'utente dovrebbe poter capire immediatamente dove si trova: è quindi importante distinguere la pagina/sezione corrente tramite il menu.
• Il menu deve essere accessibile anche se il foglio stile non viene caricato (non vedenti)
IL MENU COME LISTA
Per rendere i menu verticali compatibili con tutti i browser il codice (X)HTML è stato reso più semplice e chiaro possibile usando le liste. Il codice (X)HTML di un menu sarà, ad esempio, il seguente:
<ul >
<li ><a href="....">primo link</a></li>
<li><a href="...">secondo link</a></li>
<li><a href="...">terzo link</a></li>
</ul>
Senza le regole CSS il risultato (semplice ma compatibile con qualsiasi browser e/o dispositivo per la navigazione in internet, compresi screen reader e browser testuali come Lynx) sarebbe il seguente:
[D]
Attraverso le regole CSS trasformeremo una semplice lista di link in un semplice menu verticale. Per fare ciò elimineremo i marcatori di lista e la sottolineatura, aggiungeremo un effetto roll-over realizzato con i soli CSS senza l'uso del JavaScript e renderemo il link attivo non solo sul testo ma su tutta l'area orizzontale associata al link.
Per realizzare tale trasformazione abbiamo adottato le seguenti regole CSS.
div#menu {
color: #000;
}
div#menu ul {
list-style: none; /* elimino i punti elenco */
margin: 0px 0px 0px 0px; /* elimino i rientri delle liste */
padding: 0px 0px 0px 0px; /* elimino i rientri delle liste */
}
[D]
Innanzitutto impostiamo il contenitore del menu, e definiamo le
caratteristiche dol costro marcatore: eliminiamo i marcatori della lista ed annulliamo l'indentazione tipica
delle liste.
A questo punto il menu appare con una semplice list di link, senza
marcatori né indentazione.
div#menu li{
margin: 0px;
padding: 0px 0px 1px 0px;
}
div#menu li a {
padding: 3px 6px 3px 6px;
display: block; /* il link occupa tutto lo spazio orizzontale */
color: white;
background-color: #607e91;
text-decoration: none;/* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
height:2em; line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */
}
Attraverso la dichiarazione display:block, il link occuperà tutta l'area orizzontale quindi non sarà cliccabile solo il testo del link ma tutta l'area della riga occupata dal link. Si elimina poi la sottolineatura del link poiché sarà la struttura stessa del menu ad indicare la presenza di collegamenti. Attraveso il padding si discostano i link dal bordo del menu.
[D]
Utilizzando le proprietà height e line-height è possibile determinare l'altezza dell'area occupata da ogni singolo link. Ciò si dimostra molto utile anche per un piacevole "effetto collaterale" che annulla un fastidioso bug di Internet Explorer. Su quest'ultimo browser, infatti, il link non occupa tutta l'area (nonostante la dichiarazione display:block) se è contenuto in un elemento di cui si è fissata la larghezza (come appunto l'elemento ul.menu1). Lo svantaggio di specificare l'altezza (necessario per sopperire ad un bug di Internet Explorer) consiste nel fatto che se il testo del link non entra tutto in una sola riga si possono avere spiacevoli sovrapposizioni fra link adiacenti.
crea l'effetto roll-over, sfruttando la pseudo-classe a:hover semplicemente giocando con i colori dello sfondo e del testo dei link.
[D]
Gli effetti roll-over sono stati ottenuti, con evidenti vantaggi, senza utilizzare il Javascript. L'usabilità e l'accessibilità dei menu è integra, si noti infatti come la stessa pagina priva dei CSS sia perfettamente utilizzabile con ogni tipo di browser.
[D]