23. Menu di navigazione a blocchi

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:

  1. #sidebar #nav li {
  2. display: block;
  3. color: #fff;
  4. width: 100%;
  5. margin: 0;
  6. padding: 0.5em 0;
  7. }
  8. #sidebar #nav strong {
  9. display: block;
  10. text-indent: 1.5em;
  11. width: 100%;
  12. color: #000;
  13. background: transparent url("img/freccia.gif") no-repeat 0 50%;
  14. text-transform: uppercase;
  15. }
  16. #sidebar #nav a:link,
    #sidebar #nav a:visited {
  17. display: block;
  18. width: 100%;
  19. text-indent: 1.5em;
  20. }
  21. #sidebar #nav a:hover {
  22. background: #f7f7f5 url("img/go.gif") no-repeat 0 50%;
  23. }
  1. Righe 1-7: le voci dell'elenco vengono rese di blocco. Per nascondere il marcatore anche in Internet Explorer 7 ed inferiori impostiamo un colore del testo uguale a quello di sfondo
  2. Righe 8-15: l'elemento 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.5em
  3. Righe 16-24: I link all'interno del menu vengono resi di blocco ed il loro testo viene indentato della stessa misura usata sull'elemento strong. 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.