Formazione web: XHTML e CSS2

Menu verticale ad un solo livello

Con l'uso dei CSS è possibile realizzare diversi stili di menu partendo dal medesimo codice XHTML. La struttura XHTML più adatta al nostro scopo è sicuramente quella delle lista non ordinate o ordinate . Il codice che utilizzeremo è il seguente:

Notiamo come sono state inserite quattro voci di menu, alle quali sono state associate dei link per renderle voci di elenco cliccabili come collegamenti, per cui voci di menu vere e proprie.

Sono state inserite tre classi di appartenenza, la classe menu serve per identificare la lista a cui associare appunto il menu nel CSS, la classe primaVoce può essere utile per studiare separatamente il comportamento della prima voce di menu, nel caso di menu orizzontali ad esempio, dove potremmo separare le varie voci di menu da una linea verticale sulla sinistra, per cui potremmo dire che per la prima voce di menu (class=primaVoce) questo comportamento non deve essere seguito; infine la classe voceSelezionata serve per studiare il comportamento della voce selezionata, quindi per ben evidenziare all'utente in che pagina si trova del nostro sito.

Se non associamo alcuna regola CSS al codice XHTML appena visto, il risultato sarà il seguente:

Realizziamo un menu verticale, trasformando l'elenco mostrato dall'immagine in un menu con le voci di menu rese sotto forma di blocchi che si evidenziano al passaggio del mouse. Il codice CSS da utilizzare è il seguente:

Prima di vedere il risultato ottenuto, analizziamo il codice CSS: nella prima regola abbiamo impostato una larghezza di 200 pixel ed abbiamo eliminato sia il margine che il valore del padding; nella seconda regola abbiamo eliminato il trattino tipico delle liste non ordinate; abbiamo poi definito per i link un aspetto grafico tale da ottenere un rettangolo colorato e con bordo di 1 pixel, facendo attenzione a disporre i vari link uno al di sotto dell'altro (display:block) e non uno di seguito all'altro (display:inline); abbiamo definito poi il comportamento per il mouse Over, ovvero cambiare sia il colore di riempimento del rettangolo che il colore del testo; infine abbiamo definito il comportamento che deve avere la voce selezionata.Il risultato che otterremo sarà:

Nelle prossime lezioni vedremo altre formattazioni per i menu, in modo particolare un menu orizzontale con indicatore di selezione.

Scarica il sorgente della lezione: menu.zip.