Uno degli elementi che può essere maggiormente personalizzato attraverso
i fogli di stile sono le liste di navigazione. Abbiamo visto già visto
alcuni ninteressanti applicazioni con la serie di tre articoli dedicati ai Menu
grafici con rollover e preload via css (primo, secondo, terzo). Ora vedremo, invece, come sia possibile rendere un mena a "tabs" (cioè a linguette) solo sfruttando i CSS e senza l'uso di immagini. Ecco un'immagine che rappresenta l'esempio che andremo a realizzare in questo tutorial:
Tabs: cosa sono?
Le tabs sono "linguette", voci di un menu orizzontale che possono richiamare, tra gli oggetti reali, un archivio con separatori o una rubrica telefonica. Sono tipicamente e occupano poco spazio occupato nella pagina: generalmente sono disposti sotto l'header e la loro visibilità è massima. Altra caratteristica peculiare delle tabs è che la pagina/sezione corrente del sito risulta evidenziata. Sono queste caratteristiche a rendere particolarmente esteso l'uso delle tabs nei menu di navigazione globale, quelli presenti in tutte le pagine del sito e da cui è possibile accedere alle principali sezioni o aree.
Tabs con bordi
Sono molti gli sviluppatori e appassionati di fogli di stile che negli ultimi
mesi hanno presentato la loro versione di CSS tabs. Vedremo qui come realizzare passo passo la versione
più semplice. Iniziamo con il codice HTML, si tratta di una lista di navigazione:
All'HTML è stato aggiunto un header testuale per presentare la pagina un po'
meglio. Ora andiamo a personalizzare il nostro codice con i fogli di stile.
Personalizzare il contenitore del menu
Per prima cosa creiamo una regola per il div id="navigation", andando ad assegnare il colore di sfondo,un bordo inferiore e un padding sul lato sinistro che servirà per distanziare il menu dal bordo della finestra del browser:
background-color: #9cf;
border-bottom: 1px solid #787878;
padding-left: 20px}
Questo è il
risultato ottenuto
Personalizzare la lista
Quando succede che elementi adiacenti vengono separati da spazi bianchi, probabilmente è una questione di margini. Se non attribuiamo margini agli elementi di una pagina HTML con i CSS, i browser li assegnano automaticamente per consentire una presentazione decente di pagine senza fogli di stile. In tal caso,
avendo eliminato i margini dell'header, si tratta sicuramente del margine superiore dell'ul. Andiamo ad eliminare, quindi, i margini, il padding e il tipico disco dalla nostra lista. Ecco la regola:
list-style-type: none;
margin: 0;
padding: 0}
Fin qui questo
è il risultato
Affiancare elementi: inline o float?
A questo punto ci è necessaria un po' di teoria (e rimando all'articolo Capire il box model per approfondimenti). Basti sapere che i list-item
(ossia gli elementi li), pur non essendo
elementi block-level, ne sono parenti stretti, in quanto vengono disposti verticalmente.
Quello che vorremmo fare è poterli disporre orizzontalmente, uno a fianco all'altro.
Ci sono tre modi per ottenere il risultato:
- Dichiararli inline
- Renderli float
- Posizionarli assolutamente
Scartiamo subito la terza opzione perchè in questo caso non c'è bisogno di
scomodare i posizionamenti assoluti.
Restano le altre due. Ci sono versioni di tabs che usano la proprietà float,
mentre altre usano dichiarare i list-item come elementi inline: l'effetto è lo
stesso, ma in via teorica qual è la soluzione migliore? A parer mio la proprietà
float per affiancare voci di menu ha senso quando dobbiamo attribuire una larghezza
o uno sfondo ai singoli elementi
Rendere inline gli elementi della lista
Oltre a rendere inline i list-item, eliminiamo margini e padding. Questa è la regola:
display: inline;
margin: 0;
padding:0}
Ed ecco il risultato
Lo stile sui link
Ora è importante fissare un concetto essenziale. L'inline
formatting model specifica come vengono trattati bordi, margini, padding e
line-height degli elementi inline. È una parte dei CSS2 decisamente complessa,
molto più del box model. Quello che ci serve sapere è però abbastanza semplice:
i bordi attorno ad un elemento inline racchiudono il testo (la cui dimensione
è determinata dal font-size) più un eventuale padding, e verranno resi all'esterno
dell'area di contenuto.
Ritorniamo all'esempio. Togliamo la sottolineatura ai link del menu, aggiungiamo
del padding orizzontale e dei bordi rossi attorno. Ecco la regola:
text-decoration: none;
border: 1px solid #f00;
padding: 0 0.3em}
Vediamo il risultato
Ho volutamente messo dei bordi rossi per evidenziare che questi vanno a sovrapporsi
al bordo inferiore che avevamo assegnato al contenitore, come mostra l'ingrandimento
qui di seguito:
È proprio quello che ci serve. A questo punto possiamo affinare la nostra
regola, definendo colore e sfondo dei link:
text-decoration: none;
border: 1px solid #787878;
padding: 0px 0.3em;
background: #ccc;color: #036}
Questo è il risultato
Rollover sui link
Aggiungiamo una semplice regola che ci consenta di cambiare lo sfondo del tab su cui passa sopra il mouse:
background-color: #f0f0f0}
Ecco come
risulta il menu
"Aprire" il tab attivo
Torniamo per un attimo al codice HTML dell'esempio. Ho definito un list-item
in maniera particolare, assegnandogli un id="activelink".
Questo per poter definire una regola specifica per evidenziare il tab attivo,
cioè quello che indica la sezione del sito a cui corrisponde la pagina corrente.
In questo caso si tratta della pagina che rappresenta una ipotetica home page.
Nelle pagine della sezione "grafica" del nostro ipotetico sito, il list item a
cui verrà attribuito l'id="activelink"
sarà quello che contiene la voce "grafica". Vediamo la regola:
border-bottom: 1px solid #fff;
background-color: #fff;
color: #603}
Ecco la pagina
In sostanza abbiamo attribuito un bordo inferiore bianco che va a sovrapporsi
al bordo del div che contiene il menu, e attribuito il colore di sfondo bianco
uguale alla sezione sottostante, così da far spiccare la voce attiva. Ora il nostro
menu è quasi completo.
Dietro quest'ultima regola c'è un concetto importante, che risponde alla domanda:
come mai la voce di menu attiva non risente della regola generica sui link e dello
stato :hover
che abbiamo definito nel
passo precedente? La risposta la si trova nel concetto di Ereditarietà, cascade, conflitti tra stili
stile. In sostanza, la regola per la voce attiva è espressa attraverso due selettori
di id e un selettore di tipo, risulta così più specifica
Fissare il menu
Il nostro menu è quasi terminato. Tuttavia c'è un aspetto che non abbiamo ancora
trattato: come mai le voci del menu risultano separate orizzontalmente tra
di loro anche se non abbiamo margini orizzontali tra i list-item? La risposta
è nel fatto che gli elementi della lista sono dichiarati inline, e che nel codice
HTML i vari list-item sono scritti uno per riga, cioè sono separati da un invio,
che verrà reso come uno spazio nella nostra pagina, proprio come succede come
quando andiamo a capo con un semplice invio all'interno del testo di un paragrafo.
Se proviamo ad eliminare gli invii e scrivere i list-item tutti sulla stessa riga,
ecco cosa
succede. C'è da sottolineare il fatto che spazi e invii non vengono resi tra
elementi block-level, ma in questo caso i list-item sono stati dichiarati inline
e vengono trattati proprio come se fossero semplici parole all'interno di un contenitore.
Ora torniamo un attimo all'ultima
versione realizzata. Se proviamo a stringere molto la finestra del browser,
succede che i tabs si dispongono su più righe, una cosa che vorremmo evitare.
Ci viene in soccorso la proprietà white-space
che definisce come vanno trattati gli spazi all'interno di un elemento. In particolare,
il valore nowrap previene l'andata a capo se non specificatamente espresso
nell'HTML attraverso un <br>. Aggiungiamo
questa proprietà alla lista di navigazione:
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap
Ed ecco la versione
ultimata
Due parole sul font: nelle pagine degli esempi ho volutamente dichiarato la
dimensione del testo relativamente, così da poter mostrare come sia possibile
ottenere tabs scalabili e che si adattano al contenuto. La scelta di dimensionare
il testo dei tabs in pixel resta a voi. E ovviamente potrete anche divertirvi
a modificare i colori dei bordi, di sfondo e del testo.
Due varianti
Dichiarare i list-item inline ha un vantaggio fondamentale: è possibile infatti
rendere il menu
centrato oppure allineato
a destra solo specificando la proprietà text-align
del div con id="navigation".
L'esempio finale
A chiusura di articolo ho preparato l'esempio
finale costituito da cinque pagine praticamente identiche, in cui i link sono
attivi e per ogni pagina viene evidenziata la voce del menu corrispondente. Per
ottenere ciò è bastato spostando nel codice HTML di ciascuna pagina l'id activelink
alla voce corrispondente alla pagina.
Tutti gli esempi sono contenuti in questo archivio zip. Alla prossima.
