Formazione web: XHTML e CSS2
Menu orizzontale ad un solo livello
Come abbiamo visto nella lezione precedente 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:
Realizziamo un menu orizzontale, trasformando l'elenco mostrato dall'immagine in un menu con le voci di menu rese sotto forma di link che si evidenziano al passaggio del mouse con una linea orizzontale. Il codice CSS da utilizzare è il seguente:
Prima di vedere il risultato ottenuto, analizziamo il codice CSS: nella prima regola css abbiamo impostato un valore di margin e di padding, e un border battom di 1px a tutto il menu così da avere una linea orizziontale continua; nella seconda regola abbiamo formattato le voci dell'elenco in modo che si disponessero in orizzontale e non in verticale ed eliminato il trattino di default per le liste; nella terza regola abbiamo eliminato la decorazione del testo (ricorda che questa regola non è consigliabile utilizzarla nel caso in cui un sito deve essere conforme agli standard del W3C, in modo particolare per i siti istituzionali), abbiamo poi inserito un border bottom al link hover così che al passaggio del mouse venisse simulato un indicatore di selezione orizzontale, lo stesso accorgimento applicato anche al link selezionato.Il risultato che otterremo sarà:
Nelle prossime lezioni vedremo altre formattazioni per i menu, in modo particolare un menu orizzontale a linguette.
Scarica il sorgente della lezione: menu2.zip.
Potrebbe interessarti anche la lezione:
Formazione web: Menu Verticale XHTML.
