Barres de navigation CSS
La leçon Layout a esquissé les régions de page. Une barre de navigation est la bande de liens qui aide à se déplacer entre ces régions et pages. Commencez par une liste sémantique de liens, disposez-les en rangée calme, puis ajoutez des indices hover — gardez les menus déroulants imbriqués pour la leçon suivante.
Une boîte à outils de navigation
📊 Navigation en un coup d’œil
| Élément | Rôle au quotidien |
|---|---|
nav |
Landmark pour les liens primaires/secondaires du site |
ul / li / a |
Liste structurée de destinations |
| Reset de liste | Retirer puces et retrait par défaut pour les barres |
| Rangée horizontale | Flex ou inline-block pour aligner les liens |
| Hover / actuel | Retour pour le pointeur et « vous êtes ici » |
| Nav verticale | La même liste empilée — utile en sidebar |
La navigation, ce sont encore des liens. Gardez les contours de focus visibles, donnez un padding confortable, et ne cachez pas le sens dans des piles de div anonymes.
Liste sémantique dans nav
Enveloppez le menu dans nav et gardez les destinations comme de vraies ancres dans une liste. Les lecteurs d’écran et votre futur vous remercieront la structure.
.nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: inherit;
}
Barre horizontale avec Flex
Une simple rangée flex transforme la liste en barre. Gap et padding battent les cibles de clic trop serrées. (L’artisanat Flexbox plus profond vient plus tard — ceci suffit pour une navbar propre.)
.navbar .nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
align-items: center;
}
.navbar .nav a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
Indices hover et page actuelle
Donnez un retour au survol et marquez la page actuelle avec une classe. Ne retirez jamais les contours :focus comme « nettoyage ».
.nav a:hover {
background: #f0f4ff;
border-radius: 0.35rem;
}
.nav a.is-current {
font-weight: 700;
color: #0b5fff;
}
Navigation latérale verticale
La même liste peut s’empiler dans une sidebar. Gardez un espacement généreux pour que chaque lien reste facile à atteindre.
.sidenav .nav {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sidenav .nav a {
padding: 0.55rem 0.75rem;
}
Une habitude de navigation calme
Utilisez nav + liste + padding lisible. Préférez les rangées flex pour les barres horizontales. Laissez méga-menus et dropdowns pour la leçon suivante. Ne confondez pas une barre de liens avec la coquille complète de layout de page.
.site-nav { /* landmark wrapper */ }
.site-nav__list { /* the ul */ }
.site-nav__link { /* each a */ }
.site-nav__link.is-current { /* active page */ }
À vous de jouer
- Construisez
nav > ul.nav > li > aet réinitialisez les styles de liste. - Disposez les liens en rangée flex horizontale avec padding et gap.
- Ajoutez les styles
:hoveret.is-current. - Dupliquez la liste en variante sidenav verticale.
- Écrivez une phrase : qu’est-ce qui appartient à la leçon Dropdowns plutôt qu’ici ?
Erreurs courantes
- Padding minuscule qui rate les cibles tactiles et souris
- Retirer définitivement les contours de focus
- Soupe de divs au lieu de
navet de listes - Construire des méga-menus déroulants imbriqués dans cette leçon
- Traiter la navbar comme tout le layout du site
Résumé
- Les barres de navigation sont des listes de liens structurées dans
nav - Réinitialisez les puces, puis arrangez avec flex (ou inline-block)
- Les styles hover et actuel guident sans tuer le focus
- La nav verticale est la même liste empilée
- Les menus déroulants attendent la leçon suivante
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut