In questo appuntamento vedremo come sia possibile ottenere un menu
a tab semi-grafico in cui sia possibile disporre il testo delle tab anche
su due o tre linee. Per rendere l'idea, credo che quasi
tutti almeno una volta abbiano visitato Amazon:
Si tratta certamente di una tipologia di menu molto particolare, principalmente
indicata per menu orizzontali con molte voci in cui ci sia la necessità di ottimizzare
lo spazio al meglio.
Ora, senza entrare nei dettagli implementativi del codice di Amazon che è decisamente
"vecchio stile", quello che mi sono prefisso per questo appuntamento è
replicare l'effetto in maniera leggera, ottenendo un menu accattivante e con una buona
compatibilità crossbrowser.
Tab con una o due linee
Siamo così pronti a presentare il nostro primo esempio
e il suo screenshot:
Cominciamo dal markup: si tratta di una semplice lista non ordinata
con un paio di accorgimenti aggiuntivi per consentire la disposizione
del testo su due linee:
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Books</a></li>
<li class="active long"><a href="#">Electronics & <span>Photo</span></a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Software</a></li>
<li class="long"><a href="#">PC & <span>Video Games</span></a></li>
<li><a href="#">Watches</a></li>
<li class="long"><a href="#">computer & <span>Notebook</span></a></li>
</ul>
</div>
All'interno del div id="menu" viene inclusa la lista non ordinata con i link. Al list-item che
contiene la voce a cui corrisponde la pagina corrente viene assegnata la classe "active". Vale la pena soffermarsi
sul markup delle voci del menu a due righe:
<li class="long"
><a href="#">
prima riga
<span>seconda riga</span>
</a></li>
Viene attribuita la classe "long" e la seconda riga di testo viene racchiusa da uno span:
per dare un a capo la soluzione più intuitiva è senza dubbio l'uso di un elemento br,
ma quello che si vuole è un markup che non interferisca con la presentazione di default, e lo span è un
elemento in linea totalmente neutro in assenza di fogli di stile. Da notare anche che volendo è possibile
racchiudere la prima riga di testo invece della seconda, ottenendo lo stesso effetto.
Siamo così pronti a procedere con il CSS, che non è particolarmente complesso.
Vediamo però prima le due immagini che compongono il menu dell'esempio:
Si tratta di due immagini 200x80 pixel, di cui verranno usate in realtà solo le due porzioni
ai lati, dato che le tab si presentano adattanti in larghezza e altezza.
Ora il CSS: dopo aver azzerato e reso auto-contenente il div per il menu con la simply
clearing of float di cui abbiamo parlato in Float: teoria e pratica si procede ad azzerare margini,
padding e marcatore di lista e list-item.
Ai list-item, che vengono resi float per essere affiancati, viene assegnata la porzione sinistra dell'immagine di sfondo;
mentre ai link, anch'essi float, la porzione destra. Si tratta poi di giocare un po' con il padding di questi due elementi
per lasciare spazio sui quattro lati del testo.
È importante a questo punto vedere da vicino il meccanismo di regolazione dell'altezza dei link. In
sostanza basta giocare sul line-height: elementi a riga singola avranno un'altezza di linea
doppia, mentre quelli con due righe avranno altezza di linea pari a 1. Ecco le dichiarazioni chiave:
#menu a{line-height: 2}
#menu a.long{line-height: 1}
Questi gli aspetti essenziali del CSS, che possiamo a questo punto vedere per intero:
#menu ul,#menu li{margin: 0;padding: 0;list-style: none}
#menu ul{padding-left:50px}
#menu li{float: left;text-align: center;padding-left: 5px;
margin:5px 1px 0 0;background: #FFF url(tabBk.png) no-repeat top left;
position: relative;bottom: -1px}
#menu a{float: left;padding: 6px 5px 6px 0;line-height: 2;
text-decoration: none;text-transform: uppercase;color: #666;
background: #FFF url(tabBk.png) no-repeat top right}
#menu a:hover{color: #000}
#menu li.long a{line-height: 1}
#menu li.active,#menu li.active a{background-image: url(tabActive.png);
font-weight: bold;color: #3C5EA6}
#menu span{display:block}
Il nostro esempio è così ultimato. C'è ancora un piccolo
accorgimento da evidenziare nella sua implementazione: il menu ha testo ridimensionabile
e le tab sono scalabili sia in altezza che in larghezza. In certe condizioni però, per
questioni di arrotondamenti sul line-height, si verifica uno scarto di un
pixel tra le tab a riga singole e quelle a linea doppia, come nello screenshot seguente
realizzato su Internet Explorer con dimensione del carattere grande:
Questo difetto si è risolto facilmente traslando tutti i list-item di un pixel verso il
basso, attraverso la coppia di dichiarazioni position:relative; bottom: -1px;
così da coprire la linea nera che evidenzia lo scarto.
Un menu a una, due e tre righe
Eccoci quindi al secondo esempio, in cui abbiamo
il testo delle voci del menu che si possono disporre su una, due o tre righe:
Nell'HTML, per le voci a due righe, si è attribuita la classe "long",
mentre per quelle a tre righe la classe usata è "extralong". In entrambi
i casi, il contenuto della seconda riga è racchiuso in uno span che tramite i CSS verrà
reso display:block così da consentire le interruzioni di riga.
Il CSS è del secondo esempio è praticamente identico
a quello del primo: a cambiare sono solo le altezze di linea.
I link con una riga di testo singola avranno altezza di linea pari a 3, quelli con
due linee avranno tale proprietà pari a 1.5, mentre quelli con tre linee di testo
avranno altezza di linea pari a 1. Ecco le tre regole con le dichiarazioni chiave:
#menu a{line-height: 3}
#menu li.long a{line-height: 1.5}
#menu li.extralong a{line-height: 1}
Conclusioni
Abbiamo visto in questo articolo come sia possibile ottenere tab multiriga scalabili,
accessibili con una marcatura adeguata, poche regole CSS e due sole immagini.
La compatibilità degli esempi visti è buona: sono stati testati con successo
sulle versioni dalla 5 alla 7 di Internet Explorer, oltre che sulle ultime versioni
di Opera, Firefox e Safari. Codice e immagini sono disponibili per il download. Alla prossima.
