Dopo diversi articoli ed esempi sui menu presenti qui sulla sezione CSS, tra cui Menu grafici con rollover e preload via CSS,
un Menu a tabs con i CSS e i Menu a minitabs, vedremo in questo appuntamento una rivisitazione di una delle tecniche più note per avere menu
a tab, ovvero le note Sliding Doors of CSS, di cui è disponibile
anche una traduzione curata da GDesign.
Ecco subito l'esempio che accompagna l'articolo.
Si tratta di un menu a tab con testo ridimensionabile: ciascuna voce del menu è infatti
adattante in larghezza e scalabile in larghezza. Ecco un'immagine che riporta il menu
visualizzato con dimensione del testo minima e massima in Internet Explorer:
Prima di procedere con grafica e CSS, diamo uno sguardo al markup: il menu è realizzato
attraverso una lista non ordinata ul che racchiude i link. Ogni link testuale è contenuto
uno span:
<ul id="nav">
<li id="active"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Chi siamo</span></a></li>
<li><a href="#"><span>Prodotti</span></a></li>
<li><a href="#"><span>Servizi</span></a></li>
<li><a href="#"><span>Contattaci</span></a></li>
</ul>
Da notare che la tab attiva, ovvero quella che indica la pagina/sezione corrente, è individuata
attraverso un selettore di id, ovvero id="active".
Ora passiamo alla grafica: per il nostro menu sono necessarie due sole immagini,
una per lo stato normale e una per lo stato attivo/hover.
Ciascuna di esse è abbastanza larga e alta così da contenere le voci del menu anche nel caso l'utente abbia impostato un
font molto grande. Ecco le immagini usate in formato PNG, ciascuna grande 170x70 pixel e con un peso di circa 700 byte:
Ora procediamo con il CSS: in generale è abbastanza semplice e usa abbondantemente la proprietà float.
in effetti tutti gli elementi del nostro menu (lista, list-item, link e span) verranno dichiarati float per un totale
di quattro float.
Partiamo dalla lista, su cui useremo la tecnica Float Nearly EveryThing, di cui abbiamo parlato
nell'articolo Float: teoria e pratica. Rendendo float la lista e specificando una larghezza del 100%
siamo infatti in grado di contenere le voci del menu. Elimineremo quindi i margini, il padding e il marcatore
che caratterizzano le liste ed aggiungeremo un bordo inferiore grigio:
ul#nav{float: left;width: 100%;list-style: none;
margin: 0;padding: 0;border-bottom: 1px solid #D7D7D7}
I list-item verranno affiancati attaverso la proprietà float, e separati da un margine
sul lato destro di 0.2em (che corrisponde al 20% del font-size, ovvero due o tre pixel). Il
padding di default viene azzerato:
ul#nav li{float: left;margin: 0 0.2em 0;padding: 0}
Arriviamo così alla parte centrale dell'esempio, quella relativa ai link. Ache in questo caso, verranno
resi float per essere così "auto-adattanti" in larghezza. Da evidenziare una nota teorica importante:
elementi float sono resi automaticamente block-level. Verrà specificato un padding sinistro
di 0.4em e la porzione sinisra dell'immagine che compone un tab. Verrà infine eliminata la
sottolineatura e specificato il colore del testo:
ul#nav a{float: left;padding: 0 0 0 0.4em;
background: url(tab.png) no-repeat top left;
text-decoration: none;color: #222}
Ora veniamo agli span. I link ci hanno permesso usare l'immagine di sfondo
sul lato sinistro, grazie ad un padding sinistro: per gli span viene specificato un padding
di 0.4em sugli altri tre lati e la porzione destra dell'immagine. Anche in questo caso, gli
span vengono resi float, e per sistemare un difetto di IE viene forzato il cursore "a manina"
con la dichiarazione cursor:pointer. Ecco la regola per intero:
ul#nav span{float: left;padding: 0.4em 0.4em 0.4em 0;
background: url(tab.png) no-repeat top right;cursor: pointer}
Siamo arrivati alla parte "dinamica" dell'esempio, ovvero quella per il link attivo della
pagina che indica la voce del menu corrente (il cui list-item viene individuato da un id="active")
e i link in fase hover. Basterà in questo caso dichiarare per i due selettori l'immagine
del tab azzurro che abbiamo visto in apertura:
ul#nav li#active a,ul#nav a:hover{
background: url(tab2.png) no-repeat top left}
Per ultimare il tutto, anche per gli span relativi alla voce attiva o al link in fase :hover
verrà specificato l'immagine di sfondo più accesa, e un colore blu in modo da rendere ancora
più marcata la differenza con gli altri link:
ul#nav li#active span,ul#nav a:hover span{
background: url(tab2.png) no-repeat top right;color: #184D8A}
Il nostro esempio è così ultimato: con un sapiente uso del padding,
due sole immagini di sfondo e della proprietà float abbiamo realizzato senza ricorrere
ad hack nè workaround un menu auto-adattante in larghezza e con un effetto elastico in altezza.
In conclusione, ho preparato anche una variante che non usa gli span aggiuntivi, che
però non ha il rollover grafico sui link: la differenziazione grafica è solo sul link attivo.
La compatibilità dei menu visti è decisamente buona: sono stati testati
su Internet Explorer 5, 5.5, 6 e la beta 2 della versione 7, Opera, Firefox e Safari.
Il testo dei menu è ridimensionabile, dato che quello della pagine di esempio è impostato in percentuale: in caso
di esigenze pratiche particolari si può impostare un font-size in pixel per la lista che racchiude
l'intero menu. In questo caso la mia raccomandazione è di usare una dimensione di almeno 10-12 pixel.
Esempi e immagini sono disponibili per il download. Alla prossima.
