La création d’un menu horizontal parait pour les plus novices, compliqué à réaliser. Alors qu’il faut juste retenir quelques lignes de codes et un peu de réflexion.

Les balises utilisées

Les balises que nous allons utilisées sont :

• <nav> : Cet élément représente une section d’une page ayant des liens vers d’autres pages ou des fragments de cette page.
• <ul> : Cet élément représente une liste d’éléments sans ordre particulier. Il est souvent représenté par une liste à puces.
• <li> : Cet élément est utilisé pour représenter un élément dans une liste. Il doit être contenu dans un élément parent : une liste ordonnée (<ol>), une liste non ordonnée (<ul>) ou un menu (<menu>).
• <a> : Cet élément a (pour ancre ou anchor en anglais) définit un hyperlien vers un autre endroit de la même page ou vers une autre page sur le Web.

Voici notre code HTML :

  <nav>
    <ul>
      <li><a href="">Accueil</a></li>
      <li><a href="">Boutique</a></li>
      <li><a href="">À propos</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>

Maintenant, attaquons la CSS

Pour commencer, je vais indiquer que ma balise <li> doit être en display. C’est grâce à cela que notre menu seras horizontal.

display: inline-block;

Ensuite, il faut ajouter également un display à notre balise <a>, sinon le display de <li> n’aura servi à rien.

display: block;

Maintenant, si vous souhaitez rendre le texte de vos boutons moins près des bordures, il vous suffit d’utiliser le padding.

padding: 20px;

Tout est bon !

Pour vous faciliter la tâche, j’ai réalisé le code ci-dessus.

See the Pen Menu horizontal by Arnaud (@arduinaud) on CodePen.