CSS Barre de Navigation Verticale
Barre de Navigation Verticale CSS
Dans une barre de navigation verticale, les liens de navigation sont empilés verticalement (les uns sur les autres) et sont généralement alignés sur le côté gauche ou droit d'une page web.
Les bases d'une barre de navigation verticale consistent en une liste non ordonnée (<ul>), avec des éléments de liste (<li>), chacun contenant un lien (<a>), comme montré dans la page Introduction à la Navbar .
Exemple de Navbar Verticale CSS
Ici, nous créons une barre de navigation verticale de base avec une couleur de fond grise, et nous changeons également la couleur de fond et la couleur du texte 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: black;
padding: 8px 16px;
text-decoration: none;
}
/* Changez la couleur du lien et la couleur de fond au survol */
li a:hover {
background-color: #555555;
color: white;
} Exemple expliqué :
- Le premier bloc (ul) est similaire à la page précédente. De plus, nous avons spécifié une largeur fixe (200px) et une couleur de fond gris clair.
- Le bloc suivant (li a) stylise les éléments <a> à l'intérieur des éléments <li>.
- Afficher les liens comme des éléments de bloc rend toute la zone du lien cliquable (pas seulement le texte) et nous permet de spécifier la largeur, le rembourrage, la marge, la hauteur, etc. Nous ajoutons une couleur de lien et un peu de rembourrage. Nous supprimons également le soulignement de ces éléments <a>.
- Le dernier bloc (li a:hover) change la couleur du lien et la couleur de fond lorsque l'utilisateur passe la souris dessus.
État Actif
Maintenant, nous ajoutons une classe "active" pour mettre en évidence le lien correspondant à la page actuelle afin d'informer l'utilisateur de la page/section sur laquelle il se trouve :
Exemple
.active {
background-color: #04AA6D;
color: white;
} Centrer les Liens de la Navbar & Ajouter des Bordures
Pour centrer les liens de la navbar, ajoutez text-align: center; à <li> ou <a>.
Si vous voulez une bordure autour de la navbar, ajoutez la propriété border à <ul>.
Si vous voulez également des bordures à l'intérieur de la navbar, ajoutez une propriété border-bottom à tous les éléments <li>, sauf pour le dernier :
Exemple
ul {
border: 1px solid #555555;
}
li {
text-align: center;
border-bottom: 1px solid #555555;
}
li:last-child {
border-bottom: none;
} Navbar Verticale Pleine Hauteur
Créez une navigation latérale "collante" pleine hauteur :
Exemple
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 130px;
background-color: #f1f1f1;
height: 100%; /* Pleine hauteur */
position: fixed; /* Rendre collant, même lors du défilement */
overflow: auto; /* Activer le défilement si la navigation latérale a trop de contenu */
} Remarque : Cet exemple pourrait ne pas fonctionner correctement sur les appareils mobiles.
Navbar Responsive
Exemple
Comment utiliser les requêtes média CSS pour créer une navbar responsive :
