Comment Créer un Menu de Navigation Déroulant Avec CSS?

Un bon menu de navigation attrayant est très important pour votre site Web. Les menus de navigation sont essentiels pour la bonne accessibilité de votre site Web. Les utilisateurs aiment les sites Web bien conçus.

Le tutoriel d’aujourd’hui explique comment créer un menu de navigation déroulant sur une application Web. Créons un bon menu de navigation déroulant pas à pas.

Il existe trois façons de créer un menu déroulant à l'aide de Flash, JavaScript et CSS/HTML.

Nous allons montrer le tutoriel de menu basé sur CSS/HTML car il présente certains avantages. C'est le moyen de créer plus facilement et a une taille d'application plus petite.

L'utilisation de CSS/HTML est le meilleur moyen d'éviter les conflits JavaScript. De plus, le menu basé sur CSS/HTML peut être utilisé par plus de gens.

1. Créez HTML.

Comme toujours notre tutoriel commence par créer du HTML.

Créez un élément <div> avec un id de wrap. Créez une balise <ul> dans votre élément <div> avec une classe de "navbar". La balise <ul> est utilisée pour spécifier une liste non ordonnée, qui regroupe une collection des éléments qui n'ont pas d'ordre numérique. Chaque élément d'une liste non ordonnée est déclarée dans la balise <li>.
Écrivez le contenu que vous voulez montrer dans votre menu dans la balise <li>.

<div id="wrap">
  <ul class="navbar">
    <li>
      <a href="#">Accueil</a>
    </li>
    <li>
      <a href="#">Livres</a>
      <ul>
        <li><a href="#">Apprendre HTML</a></li>
        <li><a href="#">Apprendre CSS</a></li>
        <li><a href="#">Apprendre JavaScript</a></li>
        <li><a href="#">Apprendre PHP</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Questionnaires</a>
      <ul>
        <li><a href="#">CSS de Base</a></li>
        <li><a href="#">PHP de Base</a></li>
        <li><a href="#">JavaScript de Base</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Outils</a>
      <ul>
        <li><a href="#">Images géométriques</a></li>
        <li><a href="#">Pipette de Couleurs</a></li>
        <li><a href="#">Générateur de Code</a></li>
        <li><a href="#">Éditeur HTML</a></li>
        <li><a href="#">Base 64</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Snnipets</a>
      <ul>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">Angular</a></li>
        <li><a href="#">Java</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Fonctions de Chaîne</a>
      <ul>
        <li><a href="#">Inverse de chaîne</a></li>
        <li><a href="#">Encodeur d'URL</a></li>
        <li><a href="#">Décapant des lignes vides</a></li>
        <li><a href="#">Compte des mots de chaîne</a></li>
      </ul>
    </li>
  </ul>
</div>

Alors, le premier pas est terminé. Maintenant créons un menu de navigation attractif!

2. Ajoutez CSS.

Maintenant quand nous allons la première moitié de notre code, ajoutons des styles à lui. À l'aide des propriétés CSS, on peut créer un menu déroulant.

Définissez la largeur et la hauteur du menu avec les propriétés width et height.
Définissez z-index pour s'assurer que le menu de navigation soit placé au sommet d'autres éléments.
De plus, définissez la couleur de tout le menu avec la propriété color. Vous pouvez choisir les couleurs de notre outil Pipette de couleur.

#wrap {
  width: 100%;
  height: 50px;
  margin: 0;
  z-index: 99;
  position: relative;
  background-color: #444444;
}

Définissez la position à "absolute" pour que notre menus déroulant ne tirent pas d'autres éléments vers le bas.

.navbar {
  height: 50px;
  padding: 0;
  margin: 0;
  position: absolute;
}

Alignez les éléments de notre menu horizontalement en haut de la page en définissant la propriété float à "left".

.navbar li {
  height: auto;
  width: 135.8px;
  float: left;
  text-align: center;
  list-style: none;
  font: normal bold 13px/1em Arial, Verdana, Helvetica;
  padding: 0;
  margin: 0;
  background-color: #444444;
}

Stylisez la reste des balises d'ancrage.

.navbar a {
  padding: 18px 0;
  border-left: 1px solid #ccc9c9;
  text-decoration: none;
  color: white;
  display: block;
}

Stylisez l'arrière-plan du menu pour qu'il change la couleur lorsqu'il est en survol.

.navbar li:hover,
a:hover {
  background-color: #444444;
}

Ajoutez un style pour masquer le menu déroulant, et un autre style pour l'afficher lorsqu'un pointeur de sourit est placé sur l'élément principal du menu.

.navbar li ul {
  display: none;
  height: auto;
  margin: 0;
  padding: 0;
}

.navbar li:hover ul {
  display: block;
}

Stylisez le menu déroulant.

.navbar li ul li {
  background-color: #444444;
}

Changez les bordures, pour créer un effet du menu principal.

.navbar li ul li a {
  border-left: 1px solid #444444;
  border-right: 1px solid #444444;
  border-top: 1px solid #c9d4d8;
  border-bottom: 1px solid #444444;
}

.navbar li ul li a:hover {
  background-color: #a3a1a1;
}

Voyons à quoi notre menu déroulant ressemble:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      #wrap {
        width: 100%;
        height: 50px;
        margin: 0;
        z-index: 99;
        position: relative;
        background-color: #444444;
      }
      .navbar {
        height: 50px;
        padding: 0;
        margin: 0;
        position: absolute;
      }
      .navbar li {
        height: auto;
        width: 135.8px;
        float: left;
        text-align: center;
        list-style: none;
        font: normal bold 13px/1em Arial, Verdana, Helvetica;
        padding: 0;
        margin: 0;
        background-color: #444444;
      }
      .navbar a {
        padding: 18px 0;
        border-left: 1px solid #ccc9c9;
        text-decoration: none;
        color: white;
        display: block;
      }
      .navbar li:hover,
      a:hover {
        background-color: #444444;
      }
      .navbar li ul {
        display: none;
        height: auto;
        margin: 0;
        padding: 0;
      }
      .navbar li:hover ul {
        display: block;
      }
      .navbar li ul li {
        background-color: #444444;
      }
      .navbar li ul li a {
        border-left: 1px solid #444444;
        border-right: 1px solid #444444;
        border-top: 1px solid #c9d4d8;
        border-bottom: 1px solid #444444;
      }
      .navbar li ul li a:hover {
        background-color: #a3a1a1;
      }
    </style>
  </head>
  <body>
    <h2>Créer une Boîte Modale</h2>
    <div id="wrap">
      <ul class="navbar">
        <li>
          <a href="#">Acceuil</a>
        </li>
        <li>
          <a href="#">Livres</a>
          <ul>
            <li><a href="#">Apprendre HTML</a></li>
            <li><a href="#">Apprendre CSS</a></li>
            <li><a href="#">Apprendre JavaScript</a></li>
            <li>
              <a href="#">Apprendre PHP</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Questionnaires</a>
          <ul>
            <li><a href="#">CSS de Base</a></li>
            <li><a href="#">PHP de Base</a></li>
            <li><a href="#">JavaScript de Base</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Outils</a>
          <ul>
            <li><a href="#">Images géométriques</a></li>
            <li><a href="#">Pipette de couleur</a></li>
            <li><a href="#">Générateur de code</a></li>
            <li><a href="#">Éditeur HTML</a></li>
            <li>
              <a href="#">Base 64</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Snnipets</a>
          <ul>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Angular</a></li>
            <li>
              <a href="#">Java</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">String Functions</a>
          <ul>
            <li><a href="#">Inverse de chaîne</a></li>
            <li><a href="#">Encodeur d'URL</a></li>
            <li><a href="#">Décapant des lignes vides</a></li>
            <li><a href="#">Compte des mots de chaîne</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple d'un menu de navigation déroulant:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style-type: none;
        box-sizing: border-box;
      }
      body {
        background: url("https://images.unsplash.com/photo-1532210317995-cc56d90177d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80") center;
        background-size: cover;
        min-height: 600px;
        font-family: "Helvetica Neue", sans-serif;
      }
      nav {
        text-align: center;
      }
      .menu {
        display: inline-block;
      }
      .menu > li {
        float: left;
        color: #e298e1;
        width: 140px;
        height: 40px;
        line-height: 40px;
        background: rgba(0, 0, 0, 0.7);
        cursor: pointer;
        font-size: 17px;
      }
      .sub-menu {
        transform: scale(0);
        transform-origin: top center;
        transition: all 300ms ease-in-out;
      }
      .sub-menu li {
        font-size: 14px;
        background: rgba(0, 0, 0, 0.8);
        padding: 8px 0;
        color: white;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        transform: scale(0);
        transform-origin: top center;
        transition: all 300ms ease-in-out;
      }
      .sub-menu li:last-child {
        border-bottom: 0;
      }
      .sub-menu li:hover {
        background: black;
      }
      .menu > li:hover .sub-menu li {
        transform: scale(1);
      }
      .menu > li:hover .sub-menu {
        transform: scale(1);
      }
    </style>
  </head>
  <body>
    <nav>
      <ul class="menu">
        <li>
          Italy
          <ul class="sub-menu">
            <li>Rome</li>
            <li>Milan</li>
            <li>Venice</li>
            <li>Lacio</li>
            <li>Florence</li>
          </ul>
        </li>
        <li>
          France
          <ul class="sub-menu">
            <li>Paris</li>
            <li>Bordeau</li>
            <li>Marseille</li>
            <li>Toulouse</li>
          </ul>
        </li>
        <li>
          Spain
          <ul class="sub-menu">
            <li>Madrid</li>
            <li>Valencia</li>
            <li>Barcelona</li>
            <li>Seville</li>
            <li>Bilbao</li>
          </ul>
        </li>
        <li>
          Russia
          <ul class="sub-menu">
            <li>Moscou</li>
            <li>Saint Petersburg</li>
            <li>Tula</li>
            <li>Chekhov</li>
          </ul>
        </li>
        <li>
          Allemande
          <ul class="sub-menu">
            <li>Berlin</li>
            <li>Munich</li>
            <li>Frankfurt</li>
            <li>Hamburg</li>
            <li>Dresden</li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>

Essayez-vous-même!