CSS  »  Articoli  »  CSS Menu 

Dopo diverso tempo torniamo a parlare di CSS e in particolare di uno degli argomenti più trattati: i menu. L'idea di questo articolo nasce da una tecnica molto nota: le Mini Tabs di Dan Cederholm.

Le minitabs si presentano molto semplici e accattivanti. Nell'implementazione originale viene usato il float, mentre già un po' di tempo fa ho pensato a una tecnica che usa elementi inline. I vantaggi rispetto alla versione di Cederholm sono i seguenti: un'implementazione più semplice, non hanno bisogno di contenere i float e offrono la possibilità di avere un menu centrato, allineato a destra o sinistra solo agendo sulla proprietà text-align.

Lo svantaggio è che molti dei menu che vedremo non funzionano (anche se degradano abbastanza bene) su IE5.0: questo browser detiene attualmente il 3% di utenti nel mondo (fonte w3Schools). A parer mio è una percentuale abbastanza bassa e, salvo casi del tutto particolari, possiamo ormai trascurarlo. Nell'ultimo esempio proporrò comunque una versione che usa la proprietà float e funziona anche su IE5. L'unico svantaggio è che non può essere centrata orizzontalmente.

A proposito di menu orizzontali, se non l'avete letto, il mio consiglio è di dare uno sguardo all'articolo sui Un menu a tabs con i CSS.

Minitabs: versione di base

In questo articolo presenterò diverse varianti di minitabs: vediamo la versione di base, che sarà poi il punto di partenza per tutti gli altri esempi. Ecco il codice HTML, come sempre si tratta di una lista non ordinata:

<ul id="minitabs">
    <li><a href="#">home</a></li>
    <li><a id="current" href="#">about us</a></li>
    <li><a href="#">products</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">contact</a></li>
</ul>

Ora vedremo il CSS, con le dichiarazioni essenziali che commenteremo passo passo:

ul#minitabs{list-style: none;margin: 0;padding: 7px 0;
    border-bottom: 1px solid #CCC;font-weight: bold;
    text-align: center;white-space: nowrap}
ul#minitabs li{display: inline;margin: 0 3px}
ul#minitabs a{text-decoration: none;padding: 0 0 3px;
    border-bottom: 4px solid #FFF;color: #999}
ul#minitabs a#current{border-color: #F60;color:#06F}
ul#minitabs a:hover{border-color: #F60;color: #666}

Alla lista viene tolto il bullet e i margini, aggiunto un bordo inferiore e assegnato un padding verticale di 7 pixels. Mentre il padding superiore ha il solo scopo di bilanciare le cose, quello inferiore è essenziale affinchè la tecnica funzioni. Viene infine dichiarato l'allineamento del testo e la proprietà white-space che serve per impedire che il menu si disponga su più righe.

list-item vengono resi inline così da poterli affiancare, a aggiunto un margine orizzontale di tre pixels per aumentare ulteriormente la spaziatura.

La parte essenziale è quella relativa ai link: a questi viene dato un padding inferiore di 3px e un bordo inferiore bianco spesso quattro. Da notare che la somma di questi due valori è proprio 7 pixel, ovvero il valore del padding inferiore della lista. Infine, nella fase :hover e per il link attivo il colore del bordo viene semplicemente cambiato. Rivediamo quindi l'esempio.

Altri articoli

Altre guide

Altre newsletter