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:
<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;
ul#minitabs a{text-decoration: none;padding: 0 0 3px;
border-bottom: 4px solid #FFF;
ul#minitabs a#current{border-color: #F60;color:#06F}
ul#minitabs a:hover{border-color: #F60;color: #666}
Alla lista white-space che serve per impedire che il menu si disponga su più righe.
list-item 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 :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:
padding: 7px 0;border-top: 1px solid #CCC;
text-align: center;white-space: nowrap
ul#minitabs li{display: inline;
ul#minitabs a{text-decoration:none;padding: 3px 0 0;
border-top:4px solid
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:
background: #FF0 url(diagonal.gif);
}
Risultano così delle righe diagonali giallo chiaro su sfondo bianco. Torniamo ora al nostro esempio
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:
padding: 10px 0;border-bottom: 1px solid #CCC;font-weight: bold;
text-align: center;white-space: nowrap}
ul#minitabs li{display: inline;
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;
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:
padding: 10px 0;border-bottom: 1px solid #CCC;font-weight: bold;
text-align: center;white-space: nowrap}
ul#minitabs li{display: inline;
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;
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:
width: 100%;overflow: hidden;padding: 0;border-bottom: 1px solid #CCC;font-weight: bold}
ul#minitabs li{float: left;
ul#minitabs a{float: left; 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 Simple Clearing of floats 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
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.
