CSS Barres de Navigation
Une barre de navigation verticale :
Une barre de navigation horizontale :
Barres de Navigation CSS
Avoir une navigation facile à utiliser est important pour tout site web !
Les barres de navigation CSS constituent un élément essentiel du design web. Elles aident les utilisateurs à naviguer facilement entre les différentes sections d'un site.
Les barres de navigation sont généralement construites avec des éléments de liste HTML ( <ul> et <li>), puis stylisées avec CSS pour obtenir un bel aspect.
Elles se trouvent généralement en haut ou sur le côté d'une page web.
Barre de Navigation = Liste de Liens
Une barre de navigation nécessite un HTML standard comme base.
Elle est essentiellement une liste de liens, donc utiliser les éléments <ul> et <li> a parfaitement du sens :
Exemple
<ul>
<li><a href="default.asp">Accueil</a></li>
<li><a href="news.asp">Actualités</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">À propos</a></li>
</ul> Maintenant, supprimons les puces ainsi que les marges et le remplissage de l'élément <ul> :
Exemple
ul {
list-style-type: none;
margin: 0;
padding: 0;
} Exemple expliqué :
- Définir
list-style-type: none;- Supprime les points de liste - Définir
margin: 0;- Réinitialise les marges par défaut du navigateur - Définir
padding: 0;- Réinitialise les remplissages par défaut du navigateur
Remarque : Le code HTML et CSS dans l'exemple ci-dessus est le code de base utilisé pour les barres de navigation verticales et horizontales, dont vous apprendrez davantage dans les chapitres suivants.