Comment créer : icône de menu

Apprenez à créer une icône de menu avec CSS.

Si vous n'utilisez pas de bibliothèque d'icônes, vous pouvez utiliser CSS pour créer une icône de menu de base :

Icône de menu :

Essayez-le vous-même

Icône de menu animée (cliquez dessus) :

Essayez-le vous-même

Comment créer une icône de menu

Première étape - Ajouter HTML :

<div></div>
<div></div>
<div></div>

Deuxième étape - Ajouter CSS :

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

Essayez-le vous-même

Explication de l'exemple :

width et height Les attributs spécifient la largeur et la hauteur de chaque barre.

Nous avons ajouté une couleur de fond noire ainsi qu'une marge supérieure et inférieure pour créer de l'espace entre chaque barre.

Icône d'animation

Utilisez CSS et JavaScript pour changer l'icône du menu en icône "annuler/supprimer" lors du clic :

Première étape - Ajouter HTML :

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Deuxième étape - Ajouter CSS :

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* Rotation de la première barre */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* Estompage de la deuxième barre */
.change .bar2 {opacity: 0;}
/* Rotation de la dernière barre */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Troisième étape - Ajouter JavaScript :

function myFunction(x) {
  x.classList.toggle("change");
}

Essayez-le vous-même

Explication de l'exemple :

HTML et CSS : nous avons utilisé les mêmes styles que précédemment, mais cette fois, nous avons enveloppé chaque élément <div> par un élément de conteneur et avons attribué une classe à chaque élément.

Les éléments de conteneur sont utilisés pour afficher un symbole de pointeur lorsque l'utilisateur place le curseur sur les divs (lignes). Lorsqu'il est cliqué, il exécute une fonction JavaScript qui lui ajoute un nouveau nom de classe, ce qui change le style de chaque barre horizontale : la première et la dernière ligne se transforment et se tournent en lettre "x". Les lignes du milieu s'estompent progressivement et deviennent invisibles.