Il menu di navigazione che andremo a formattare è un menu verticale a blocchi. Scegliamo di usare un indicatore per la sezione corrente ed un rollover per i link attivi. Gli stili saranno:
strong
svolge qui la funzione di marcare la sezione corrente.
Viene quindi reso di blocco e gli viene assegnata una particolare immagine di sfondo posta a sinistra e centrata in verticale
(coordinate 0, 50%). Il testo viene reso in maiuscolo ed indentato di 1.5emstrong
. Sullo stato :hover
viene modificato il colore di sfondo ed assegnata
un'immagine di sfondo posta a sinistra e centrata in verticale.Si noti la ridondanza di dichiarazioni relative alla larghezza degli elementi, necessarie per evitare problemi in Internet Explorer 6 ed inferiori. Si noti anche come si sia evitato il preload delle immagini sul rollover, dato il peso irrisorio di queste ultime (pochi bytes).
Possiamo osservare i nostri progressi nel nostro documento XHTML e nel nostro documento HTML.