Barre de navigation

De manière générale, il y a deux types de barres de navigation (communément appelées “menu”) sur un site web. Une barre de navigation verticale et/ou une barre de navigation horizontale.

Un menu facile à utiliser et attrayant est un important pour un site web. Le langage CSS permet de transformer un menu HTML “brut” en une barre de navigation.

Ce chapitre montre pas à pas comment créer une barre de navigation horizontale et une barre de navigation horizontale.

Code de base pour une barre de navigation

Un menu est avant tout une liste de liens menant vers les différentes pages d’un site web. Pour commencer, il faut donc créer une liste de liens en HTML :

<nav>
    <ul>
        <li><a href="page1.html" title="Lien 1">Lien 1</a></li>
        <li><a href="page2.html" title="Lien 2">Lien 2</a></li>
        <li><a href="page3.html" title="Lien 3">Lien 3</a></li>
        <li><a href="page4.html" title="Lien 4">Lien 4</a></li>
        <li><a href="page5.html" title="Lien 5">Lien 5</a></li>
    </ul>
</nav>

Voici, ensuite, le code CSS de base pour la création d’une barre de navigation :

nav ul {
    list-style-type: none; /* Les puces sont enlevées */
    padding: 0;
    margin: 0; /* padding et margin sont définis à 0 afin de retirer les réglages par défaut du navigateur */
}

Barre de navigation verticale