Da una semplice struttura di una lista non ordinata è possibile creare barre di navigazione stilisticamente eleganti e complesse. L’aggiunta di id semantici agli elementi della lista e al corpo della pagina permette inoltre di attivare, grazie ai selettori discendenti, una segnaletica visuale tu sei qui utile a orientare il visitatore nella sua navigazione.
La struttura
<body id="home"> <div id="navigazione"> <h2>Navigazione</h2> <ul> <li id="nav-home"><a href="#">Home</a></li> <li id="nav-chi"><a href="chi-siamo.html">Chi siamo</a></li> <li id="nav-blog"><a href="#">Blog</a></li> </ul> </div>
Lo stile per una barra verticale
div#navigazione h2 {
display: none;
}
div#navigazione ul {
list-style-type: none;
}
div#navigazione a {
padding: 10px 0 10px 35px;
display: block;
border-bottom: 1px solid #c30;
text-decoration: none;
color: #c30;
background: white;
}
div#navigazione a:hover {
color: white;
background: #c30;
}
Lo stile per una barra orizzontale
div#navigazione h2 {
display: none;
}
div#navigazione ul {
list-style-type: none;
}
div#navigazione li {
float: left;
}
div#navigazione a {
line-height: 1.6em;
padding: 0 65px 0 35px;
display: block;
border-right: 1px solid #c30;
text-decoration: none;
color: #c30;
background: white;}
div#navigazione a:hover {
color: white;
background: #c30;
}
Lo stile per l’effetto tu sei qui
body#home li#nav-home a { color: black; background-color: #c50;}
Socializzazione
Letture (su aNobii)
Scatti (su Flickr)