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.
Due varianti sull'allineamento
Solo agendo sulla proprietà text-align è possibile ottenere la versione allineata a sinistra e allineata a destra, ed è questo uno dei vantaggi della sempicità dell'esempio di base. Proseguiamo con gli altri esempi.
Bordi invertititi
Un'altra variante che è possibile ottenere semplicemente è quella con i bordi invertiti. Ciò è possibile invertendo orientamento di bordi e padding dell'esempio base. Ecco il CSS per intero, con le dichiarazioni chiave in grassetto:
ul#minitabs{list-style: none;margin: 0;padding: 7px 0;
border-top: 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: 3px 0 0;
border-top:4px solid #FFF;color: #999}
ul#minitabs a#current{border-color: #F60;color: #06F}
ul#minitabs a:hover{border-color:#F60; color:#666}
Uno sfondo per il menu
Nel prossimo esempio ho usato uno sfondo per il menu. È interessante la tecnica con cui sono state realizzate le righe diagonali, ovvero le superstripes. Vediamo l'immagine ingrandita dell'immagine di sfondo per il menu:
Si tratta di una gif in cui le righe diagonali (in grigio nell'immagine sopra) sono trasparenti. Assegnando un colore oltre che l'immagine di sfondo alla lista è quindi possibile ottenere le righe di un qualsiasi colore senza dover rielaborare l'immagine.Ecco quindi la dichiarazione CSS aggiuntiva per la lista:
ul#minitabs{
background: #FF0 url(diagonal.gif);
}
Risultano così delle righe diagonali giallo chiaro su sfondo bianco. Torniamo ora al nostro esempio: In questo caso il bordo inferiore è stato assegnato solo al link attivo e quello in stato hover. Il CSS è incorporato nell'HTML, come per tutti gli esempi. Inoltre, anche di questa versione è possibile ottenere un menu allineato a destra, a sinistra o a tabs invertiti.
Versione con marcatore
Iniziamo con questo esempio le versioni con i marcatori e le immagini di sfondo per i link. In questo caso viene usata un'unica immagine, impostata come sfondo sui link in stato attivo e in stato hover. Ecco il CSS:
ul#minitabs{list-style: none;margin: 0;padding: 10px 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 10px;
color: #999}
ul#minitabs a#current,ul#minitabs a:hover{
background: url(orange.gif) no-repeat center bottom;
color: #666}
ul#minitabs a#current{color: #06F}
Versione con rollover
Nel prossimo esempio ho usato due immagini di sfondo: un semicerchio giallo per i link in stato normale, e uno arancione in stato attivo/hover. Il meccanismo per il rollover è simile a quello usato in Menu grafici con rollover e preload via CSS - I: il fatto che la stessa immagine venga usata sia per lo stato attivo che quello hover ci garantisce infatti che l'immagine per il rollover sia immediatamente disponibile. Ecco il CSS:
ul#minitabs{list-style: none;margin: 0;padding: 10px 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 10px;
background: url(yellow.gif) no-repeat bottom center;
color: #999}
ul#minitabs a#current, ul#minitabs a:hover{
background: url(orange.gif) no-repeat center bottom;
color: #666}
ul#minitabs a#current{color: #06F}
Qualcosa di di diverso: mini-icone
Giocando un po' con le immagini potremo realizzare un menu semplice e allo stesso tempo molto accattivante. Un'idea potrebbe essere quella di un menu con mini-icone. Anche in questo caso sono state usate due immagini, una per lo stato normale e uno per lo stato attivo/hover insieme. Il CSS è praticamente identico a quello dei due esempi precedenti, sono solo cambiati i valori di padding per le icone che sono alte 16 pixel.
Invertendo i valori di padding di lista e link, è possibile anche avere un menu con mini-icone superiori. Siamo alla conclusione, ma prima vediamo un'alternativa con i float.
Float doppi
Tutti i menu che abbiamo visto sono semplici ed efficaci, hanno solo un piccolo difetto: non vanno su Internet Explorer 5.0. Questo browser è ormai obsoleto, e come abbiamo detto in apertura detiene una percentuale di utilizzatori ormai bassa (3%). Mentre nelle versioni con i bordi si in IE5 si perde il bordo, nelle versioni con gli sfondi l'immagine si dispone sotto il testo: sembra infatti che IE5 non implementi correttamente il padding degli elementi inline.
Se non abbiamo la necessità di un menu centrato possiamo pensare a un'alternativa con i float che funziona anche su IE5. Ecco l'esempio che usa i doppi float. Questo esempio può costituire un ulteriore spunto vista la sua robustezza, l'implementazione semplice e l'uso di float auto-contenuti. Ecco il CSS, con evidenziate come sempre le dichiarazioni chiave:
ul#minitabs{width: 100%;overflow: hidden;list-style: none;margin: 0;
padding: 0;border-bottom: 1px solid #CCC;font-weight: bold}
ul#minitabs li{float: left;margin: 0;padding: 0 7px}
ul#minitabs a{float: left;text-decoration: none;padding: 16px 0 4px;
background: url(star.gif) no-repeat center top;
color: #999;text-align: center}
ul#minitabs a#current,ul#minitabs a:hover{color: #666;
background: url(star2.gif) no-repeat center top}
ul#minitabs a#current{color: #06F}
La lista viene dichiarata con una larghezza pari al 100% e con overflow:hidden. Questo per contenere i float senza markup aggiuntivo. La tecnica usata è la Simple Clearing of floats di cui abbiamo parlato nell'articolo Float: Teoria e Pratica II.
I list-item vengono affiancati rendendoli float, e dichiarato un padding orizzontale per distianziarli un po'. Infine i link vengono resi float, viene dichiarato del padding e assegnato lo sfondo, che viene ridefinito per il link attivo e quello in stato hover. Due parole sulla scelta di rendere float anche i link: questi vengono automaticamente block-level e ci semplifica molto l'uso di padding e sfondo che su elementi block vengono trattati molto diversamente rispetto agli elementi inline.
Conclusioni
Si conclude qui l'articolo dedicato alle minitabs, in cui abbiamo visto diversi esempi di menu orizzontali. l'implementazione è semplice, non fa uso di hack e la resa (eccezion fatta di IE5 sui primi nove esempi) è cross-browser. l'ultima versione è una fonte di ulteriore spunto. Codice ed esempi sono disponibili per il download. Alla prossima.
