CSS verticale navigatiebalk
Verticale navigatiebalk
Om een verticale navigatiebalk te maken, kun je de <a>-elementen in de lijst opmaken, naast de code van de vorige pagina:
Voorbeeld
li a
{
display: block;
width: 60px;
}
Voorbeeld uitgelegd:
display: block;- Door de links als blokelementen weer te geven, wordt het hele linkgebied klikbaar (niet alleen de tekst) en kunnen we de breedte (en opvulling, marge, hoogte, enz.) specificeren als je wilt)width: 60px;- Blokelementen nemen standaard de volledige breedte in beslag. We willen een breedte van 60 pixels opgeven
U kunt ook de breedte van <ul> instellen en de breedte van <a> verwijderen, aangezien deze de volledige beschikbare breedte innemen wanneer ze worden weergegeven als blokelementen. Dit levert hetzelfde resultaat op als ons vorige voorbeeld:
Voorbeeld
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
Voorbeelden van verticale navigatiebalk
Maak een eenvoudige verticale navigatiebalk met een grijze achtergrondkleur en verander de achtergrondkleur van de links wanneer de gebruiker de muis eroverheen beweegt:
Voorbeeld
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;
}
Actieve/huidige navigatielink
Voeg een "actieve" klasse toe aan de huidige link om de gebruiker te laten weten op welke pagina hij/zij zich bevindt:
Voorbeeld
.active {
background-color: #04AA6D;
color: white;
}
Koppelingen centreren en randen toevoegen
Voeg toe text-align:centeraan <li> of <a> om de links te centreren.
Voeg de bordereigenschap toe aan <ul> voeg een rand toe rond de navigatiebalk. Als je ook randen binnen de navigatiebalk wilt, voeg dan een a toe border-bottomaan alle <li>-elementen, behalve de laatste:
Voorbeeld
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Vaste verticale navigatiebalk op volledige hoogte
Maak een "plakkerige" zijnavigatie op volledige hoogte:
Voorbeeld
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 */
}
Opmerking: dit voorbeeld werkt mogelijk niet correct op mobiele apparaten.