Barre de navigation CSS
Démo : Barres de navigation
Verticale
Barres de navigation
Avoir une navigation facile à utiliser est important pour tout site Web.
Avec CSS, vous pouvez transformer des menus HTML ennuyeux en barres de navigation attrayantes.
Barre de navigation = Liste des liens
Une barre de navigation a besoin de HTML standard comme base.
Dans nos exemples, nous allons construire la barre de navigation à partir d'une liste HTML standard.
Une barre de navigation est essentiellement une liste de liens, donc l'utilisation des éléments <ul> et <li> est parfaitement logique :
Exemple
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Supprimons maintenant les puces, les marges et le rembourrage de la liste :
Exemple
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Exemple expliqué :
list-style-type: none;- Supprime les balles. Une barre de navigation n'a pas besoin de marqueurs de liste- Définir
margin: 0;etpadding: 0;supprimer les paramètres par défaut du navigateur
Le code de l'exemple ci-dessus est le code standard utilisé dans les barres de navigation verticales et horizontales, sur lequel vous en apprendrez plus dans les chapitres suivants.