Apprenez à créer une icône de menu avec CSS.
Comment faire pour créer une icône de menu
Si vous n'utilisez une bibliothèque d'icônes, vous pouvez créer une icône de menu de base avec CSS:
Icône du menu:
Icône du menu d' animation (click on it) :
Étape 1) Ajouter HTML:
Exemple
<div></div>
<div></div>
<div></div>Étape 2) Ajouter CSS:
Exemple
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
} Essayez vous - même » exemple Explained
La width et la height propriété spécifie la largeur et la hauteur de chaque barre.
Nous avons ajouté un noir background-color , et le haut et le bas margin est utilisée pour créer une certaine distance entre chaque barre.
Icône d'animation
Utilisez CSS et JavaScript pour changer l'icône du menu à "cancel/remove" icône lorsqu'il est cliqué sur:
Étape 1) Ajouter HTML:
Exemple
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>Étape 2) Ajouter 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) Ajouter JavaScript:
exemple Explained
HTML & CSS: Nous utilisons les mêmes styles que précédemment, mais cette fois, nous envelopper un élément conteneur autour de chaque <div> élément et nous spécifions un nom de classe pour chacun.
L'élément de conteneur est utilisé pour afficher un symbole de pointeur lorsque l'utilisateur déplace la souris sur les divs (bars) . Quand il est cliqué, il exécute une fonction JavaScript qui ajoute un nouveau nom de classe, ce qui va changer les styles de chaque barre horizontale: le premier et le dernier bar est transformé et mis en rotation à la lettre "x" . La barre au milieu disparaît et devient invisible.