Barre de navigation verticale CSS
Barre de navigation verticale
Pour créer une barre de navigation verticale, vous pouvez styliser les éléments <a> à l'intérieur de la liste, en plus du code de la page précédente :
Exemple
li a
{
display: block;
width: 60px;
}
Exemple expliqué :
display: block;- L'affichage des liens sous forme d'éléments de bloc rend toute la zone de lien cliquable (pas seulement le texte), et cela nous permet de spécifier la largeur (et le rembourrage, la marge, la hauteur, etc. si vous le souhaitez)width: 60px;- Les éléments de bloc occupent toute la largeur disponible par défaut. Nous voulons spécifier une largeur de 60 pixels
Vous pouvez également définir la largeur de <ul> et supprimer la largeur de <a>, car ils occuperont toute la largeur disponible lorsqu'ils seront affichés en tant qu'éléments de bloc. Cela produira le même résultat que notre exemple précédent :
Exemple
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
Exemples de barre de navigation verticale
Créez une barre de navigation verticale de base avec une couleur d'arrière-plan grise et modifiez la couleur d'arrière-plan des liens lorsque l'utilisateur passe la souris dessus :
Exemple
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;
}
Lien de navigation actif/actuel
Ajoutez une classe "active" au lien actuel pour indiquer à l'utilisateur sur quelle page il se trouve :
Exemple
.active {
background-color: #04AA6D;
color: white;
}
Centrer les liens et ajouter des bordures
Ajouter text-align:centerà <li> ou <a> pour centrer les liens.
Ajoutez la borderpropriété à <ul> ajoutez une bordure autour de la barre de navigation. Si vous voulez également des bordures à l'intérieur de la barre de navigation, ajoutez un border-bottomà tous les éléments <li>, à l'exception du dernier :
Exemple
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Barre de navigation verticale fixe pleine hauteur
Créez une navigation latérale "collante" pleine hauteur :
Exemple
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 */
}
Remarque : Cet exemple peut ne pas fonctionner correctement sur les appareils mobiles.