Barra di navigazione verticale CSS
Barra di navigazione verticale
Per costruire una barra di navigazione verticale, puoi definire lo stile degli elementi <a> all'interno dell'elenco, oltre al codice della pagina precedente:
Esempio
li a
{
display: block;
width: 60px;
}
Esempio spiegato:
display: block;- La visualizzazione dei collegamenti come elementi di blocco rende cliccabile l'intera area del collegamento (non solo il testo) e ci consente di specificare la larghezza (e riempimento, margine, altezza, ecc. se lo si desidera)width: 60px;- Gli elementi del blocco occupano l'intera larghezza disponibile per impostazione predefinita. Vogliamo specificare una larghezza di 60 pixel
Puoi anche impostare la larghezza di <ul> e rimuovere la larghezza di <a>, poiché occuperanno l'intera larghezza disponibile quando visualizzati come elementi di blocco. Questo produrrà lo stesso risultato del nostro esempio precedente:
Esempio
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
Esempi di barra di navigazione verticale
Crea una barra di navigazione verticale di base con un colore di sfondo grigio e cambia il colore di sfondo dei link quando l'utente passa il mouse su di essi:
Esempio
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
Collegamento di navigazione attivo/corrente
Aggiungi una classe "attiva" al link corrente per far sapere all'utente in quale pagina si trova:
Esempio
.active {
background-color: #04AA6D;
color: white;
}
Centra collegamenti e aggiungi bordi
Aggiungi text-align:centera <li> o <a> per centrare i link.
Aggiungi la borderproprietà a <ul> aggiungi un bordo attorno alla barra di navigazione. Se vuoi anche i bordi all'interno della barra di navigazione, aggiungi a border-bottoma tutti gli elementi <li>, ad eccezione dell'ultimo:
Esempio
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Barra di navigazione verticale fissa a tutta altezza
Crea una navigazione laterale "appiccicosa" a tutta altezza:
Esempio
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
Nota: questo esempio potrebbe non funzionare correttamente sui dispositivi mobili.