Creare un menu Breadcrumb di navigazione con CSS3

 

Un menu Breadcrumb consente agli utenti di sapere esattamente dove si trovano all’interno di una struttura gerarchica di link e di potere facilmente spostarsi o tornare al livello superiore nella gerarchia delle pagine. Così, in altre parole, un menu Breadcrumb è in grado di ridurre il numero di azioni che un utente deve eseguire per navigare a ritroso tra le pagine.

Nelle pagine web i menu Breadcrumb, di norma, appaiono orizzontalmente nella parte superiore della pagina, al di sotto delle barre dei titoli o degli header. Rappresentano un “rapido menu” composto di link utili agli utenti per tornare indietro alla pagina iniziale del sito web o a pagine visitate in precedenza per arrivare a quella attuale.

Quindi, per farla semplice, se si dispone di un sito web con molte pagine e sotto-livelli, al fine di aumentarne l’usabilità, è consigliabile inserire un menu Breadcrumb.
E di seguito vedremo come creare diversi stili di Breadcrumb con l’ausilio di semplice codice CSS3.

Menu Breadcrumb – Codice HTML e CSS di base

 

Menu Breadcrumb – Esempio 1

 

Menu Breadcrumb – Esempio 2

 

Menu Breadcrumb – Esempio 3

 

Menu Breadcrumb – Esempio 4

Bene, questi sono i 4 stili di menu breadcrumb che avevo piacere di segnalarvi, nessuna immagine è richiesta per la loro implementazione e naturalmente, colori, testo e dimensioni sono liberamente personalizzabili. Guardate pure la demo per vedere i 4 stili dal vivo. Buon lavoro!

Demo Autore

pixolo ads
Cambia Copertina
4351 | Articolo pubblicato 4 anni fa nella categoria Css - Html.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
4
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×