Formazione web: XHTML e CSS2
Menu orizzontale a linguette ad un solo livello
Nelle lezioni precedenti abbiamo visto come 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 linguette che si evidenziano al passaggio del mouse e al loro click rendono l'idea di cartelle di documenti che si aprono. Il codice CSS da utilizzare è il seguente:
Prima di vedere il risultato ottenuto, analizziamo il codice CSS: nella prima regola css abbiamo impostato il colore di sfondo per la pagina web; nella seconda abbiamo impostato gli stessi valori per il menu, un valore di margin e padding, e un border battom di 1px a tutto il menu così da avere una linea orizziontale continua; nella terza 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 quarta 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 bordo a tutto il link, bordo che invece abbiamo eliminato al link selezionato così da simulare l'idea delle linguette. Il risultato che otterremo sarà:
Nelle prossime lezioni vedremo altre formattazioni per i menu, in modo particolare come realizzare un menu a due livelli.
Scarica il sorgente della lezione: menu3.zip.
Potrebbe interessarti anche la lezione:
Formazione web: Menu Verticale XHTML.
