Breadcrumb con i CSS

Le breadcrumb sono un ausilio di navigazione utilissimo in siti di portata
medio-alta, con sottosezioni o categorie. In questo articolo vedremo due semplici metodi per personalizzarle e renderle accattivanti con un pizzico di grafica e CSS. Cominciamo subito.

Una breadcrumb con rollover grafico

Eccoci al primo esempio che accompagna l'articolo, di cui riporto uno screenshot:

L'ispirazione proviene da questo articolo in giapponese (qui l'esempio) citato tempo fa anche
sul blog; ho pensato di riprendere la tecnica aggiungendo un bell'effetto rollover.
Vediamo per prima cosa il markup:

Si tratta di un div con id="breadcrumb" in
cui sono inseriti i link che costituiscono la breadcrumb insieme ai separatori <span>></span>
(ovvero un segno di maggiore codificato racchiuso in uno span) che consentono di definire visivamente la stessa breacrumb anche in assenza di CSS.

Ci sono moltissimi modi per rappresentare in HTML una breadcrumb, e molte discussioni sono
state fatte sulla corretta marcatura da usare. A parer mio questa è una scelta adeguata, in quanto in assenza
dei fogli di stile la breadcrumb dell'esempio risulta perfettamente comprensibile. Ecco infatti come risulta con solo
una regola per ridefinire la tipografia di default del browser:

Prima di procedere con il CSS, diamo uno sguardo alla grafica usata per l'esempio.
Sono state usate due immagini. Questa per lo sfondo dell'intero elemento
e quella che riporto qui di seguito per i link con il rollover (combina
i due stati dei link):

Siamo ora pronti a procedere con il CSS dell'esempio. Si
compone di cinque regole. Vediamolo per intero:

Nella prima regola vengono specificate le dimensioni per la breadcrumb ed è definito il line-height, impostato con un valore uguale a quello dell'altezza così da centrare verticalmente il testo. Viene anche attribuita al div l'immagine di sfondo. È stata resa float
così da contenere a sua volta i link, che verranno resi anch'essi float. La tecnica
usata è la float nearly everything di cui abbiamo parlato
qui.

I separatori testuali, racchiusi dallo span, sono semplicemente nascosti
usando display: none. Per quanto riguarda i link: sono resi float, con altezza pari a quella della breacrumb e allargati
con un padding orizzontale. Viene poi specificata l'immagine
di sfondo, impostato il colore ed eliminata la sottolineatura. In fase :hover
viene poi modificata la background-position così da mostrare la parte inferiore dell'immagine per l'effetto rollover. Infine,
il testo dell'em viene reso normale anziché in corsivo.

Con poche regole il nostro esempio è ultimato.

Esempio 2: una semplice breadcrumb

Il markup della breadcrumb usata nel primo esempio
si presta benissimo a molte possibilità di modifica. Nel secondo esempio
si è realizzata una semplice breadcrumb testuale con separatore grafico. Riporto uno screenshot:

La realizzazione del secondo esempio è davvero semplice: in questo
caso non si sono usati i float, ma si è intervenuto solo sulle proprietà del testo e sul padding dei link così da avere spazio per il separatore grafico. Ecco il CSS per intero:

Il separatore grafico usato nell'esempio proviene da Bullet Madness, un sito su cui se ne possono trovare davvero molti.

Si conclude qui l'articolo, i cui esempi sono disponibili per il download. La
compatibilità è buona: sono stati infatti testati con successo sulle versioni
di Internet Explorer dalla 5.5 alla 7, oltre che sulle ultime versioni di Opera,
Firefox e Safari. Alla prossima.