La barra di navigazione è la parte del sito in cui sono presentate le sezioni del sito.
Quando sono all'interno di una sezione, la barra dovrebbe evidenziare questo fatto per permettere all'utente di capire immediatamente in quale sezione è, non confondendo l'utente mettendo ad esempio un link alla home page quando l'utente è già nella home page; occorre differenziare il link, per esempio cambiandolo di colore.
Per fare questo diamo un id al body di ogni sezione, e scriviamo la navigazione in questo modo:
La pagina home avrà poi id di body uguale a "home", la pagina prodotti avrà id del body uguale a "prodotti" e contatti avrà id del body uguale a "contatti".
All'interno del CSS avremo una parte come segue:
#navigation {
position: absolute;
left: 20px;
top: 0;
}
#navigation * {
color: #679ef1;
display: inline;
}
#home #thome a,
#prodotti #prodotti a,
#contatti #tcontatti a,
#navigation a:hover {
color: #fff;
text-decoration: none;
}
In questo modo nella home avrò il link a home di colore diverso che non nelle altre pagine, per sottolineare che già mi trovo nella home page. La stessa cosa avviene anche per le altre pagine.
Articoli correlati:
