Comment faire - icône de menu
Apprenez à créer une icône de menu avec CSS.
Comment créer une icône de menu
Si vous n'utilisez pas de bibliothèque d'icônes, vous pouvez créer une icône de menu de base avec CSS :
Icône Menu :
Icône de menu animé (cliquez dessus) :
Étape 1) Ajoutez du HTML :
Exemple
<div></div>
<div></div>
<div></div>
Étape 2) Ajoutez CSS :
Exemple
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Exemple expliqué
La propriété width
et height
spécifie la largeur et la hauteur de chaque barre.
Nous avons ajouté un noir background-color
, et le haut et le bas margin
sont utilisés pour créer une certaine distance entre chaque barre.
Icône animée
Utilisez CSS et JavaScript pour changer l'icône du menu en une icône "annuler/supprimer" lorsqu'on clique dessus :
Étape 1) Ajoutez du HTML :
Exemple
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
Étape 2) Ajoutez CSS :
Exemple
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate
first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the
second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform:
rotate(45deg) translate(-8px, -8px) ;
transform:
rotate(45deg) translate(-8px, -8px) ;
}
Étape 3) Ajoutez JavaScript :
Exemple
function myFunction(x) {
x.classList.toggle("change");
}
Exemple expliqué
HTML & CSS : Nous utilisons les mêmes styles qu'auparavant, mais cette fois-ci, nous enveloppons un élément conteneur autour de chaque élément <div> et nous spécifions un nom de classe pour chacun.
L'élément conteneur est utilisé pour afficher un symbole de pointeur lorsque l'utilisateur déplace la souris sur les divs (barres). Lorsqu'il est cliqué dessus, il exécutera une fonction JavaScript qui lui ajoutera un nouveau nom de classe, ce qui changera les styles de chaque barre horizontale : la première et la dernière barre sont transformées et tournées vers la lettre "x". La barre au milieu s'estompe et devient invisible.