Nov
1
Top menu con liste e CSS
Qualche articolo fa si è parlato di come creare un menu laterale tramite liste (<ol> e <ul>) e CSS, dell’importanza che un menu fatto tramite lista ricopra nell’indicizzazione del sito (anziché usare per esempio le tabelle).
Con lo stesso metodo è possibile creare un menu orizzontale (top menu, footer o sitemap per i visitatori). Vediamo come.
Iniziamo con il solito codice HTML:
<ul id="menu"> <li>Pippo</li> <li>Pluto</li> <li>Paperino</li> <li>Nonna Papera</li> </ul>
Questa volta ho deciso di dare l’ID al tag “<ul>”.
Togliamo il disco o il numero progressivo dalla lista (a seconda che sia <ul> oppure <ol>) ed eliminiamo il margine:
ul#menu {
list-style: none;
margin:0;
padding:0;
}
A questo punto non ci resta che dichiarare lo stile del tag <li>. È necessario dividere le voci del menu. A questo proposito alcuni designer preferiscono aggiungere una piccola gif di sfondo al tag <li>, ancorata orizzontalmente a destra o a sinistra non ripetuta. L’escamotage è utile a separare le voci dei menu, ma per ottenere un risultato simile io preferisco dichiarare un bordo su quattro, così:
ul#menu li {
float: right;
border-left: 1px solid #cccccc;
padding:5px;
}
Com’è chiaro dal CSS, le voci sono allineate a destra, il border-left definisce il bordo per la separazione delle voci, e il padding di 5px crea una piccola distanza fra le voci utile per non affaticare il navigatore.
I file menu.html e style.css sono gli stessi dell’ultimo post sull’argomento, come prima possono essere scaricati e usati per qualsiasi scopo.
