Les pages web auxquelles nous avons accès ont évolué à un rythme effréné et continuent de le faire. Toutefois, la structure de base des pages reste similaire à celle des pages précédentes, avec une dynamique supplémentaire. Une page web doit obligatoirement comporter certains éléments. L'un de ces points de contrôle pour la validation d'une page web est l'icône du menu à trois barres, qui, en cliquant dessus, s'ouvre en accordéon pour donner au visiteur un aperçu de ce qu'il peut explorer sur le site web.
Dans cet article, nous allons explorer différentes méthodes pour créer une icône de menu à l'aide de CSS et de HTML. Voici quelques exemples :
Exemple 1 : Création d'une icône de menu basique à l'aide de CSS
HTML
Commencez par créez un fichier HTML, menuIcon.html. Nous allons appeler la feuille de style et l'utiliser pour créer un menu.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Menu Icon - Tutorials Grey</title>
<link rel = "stylesheet" href = "menuIcon.css">
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
Nous déclarons trois éléments <div> sur la page HTML pour obtenir l'icône de menu à trois barres horizontales.
Nous allons ensuite écrire un code CSS simple pour créer une barre de hauteur et de largeur spécifiques pour chaque élément <div>.
CSS
Créez une feuille de style (menuIcon.css par exemple) et écrivez la définition de la balise <div> comme indiqué ci-dessous :
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Enregistrez les fichiers et ouvrez le fichier HTML dans IE/Chrome/Firefox pour voir le résultat. Une icône de menu apparaît dans le coin supérieur gauche de la page.
Dans cet exemple, la hauteur et la largeur de chaque barre horizontale sont spécifiées. La marge ajoute une certaine distance entre chaque barre, et la couleur d'arrière-plan, le noir, met en évidence chaque barre pour qu'elle ressemble à une icône de menu.
Exemple 2 : Animer l'icône de menu à l'aide de CSS
HTML
Dans le fichier HTML, nous un élément <div> de classe .menu à l'intérieur duquel nous ajoutons un autre <div>.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated Menu Icon - Tutorials Grey</title>
<link rel = "stylesheet" href = "menuIcon.css">
</head>
<body>
<p>Survolez l'icône de menu pour la changer en X :</p>
<div class="menu">
<div></div>
</div>
</body>
</html>
Nous allons maintenant définir le code CSS qui sera utilisé dans le fichier HTML pour voir le résultat final.
CSS
Dans cet exemple, on définit la taille de l'élément <div> de classe .menu, qui englobera les barres de l'icône de menu ; on définit la taille et les marges de l'élément enfant <div>, qui sera la barre centrale, et les pseudo-éléments :after et :before de la classe .menu seront respectivement la barre supérieure et la barre inférieure de l'icône de menu.
.menu{
margin: 1em;
width: 40px;
cursor: pointer;
}
.menu:after,
.menu:before,
.menu div {
background-color:black;
border-radius: 3px;
content: '';
display: block;
height: 5px;
margin: 7px 0;
transition: all .2s ease-in-out;
}
Nous allons maintenant travailler sur l'animation de l'icône en utilisant les première et troisième barres, pseudo-éléments :before et :after.
.menu:hover:before {
transform: translateY(12px) rotate(135deg);
}
.menu:hover:after {
transform: translateY(-12px) rotate(-135deg);
}
.menu:hover div {
transform: scale(0);
}
La logique de l'animation est la suivante : la barre supérieure (:before) et la barre inférieure (:after) pivotent selon l'angle et la direction spécifiés lorsqu'elles sont survolées. La barre du milieu (div) est transformée en 0, c'est-à-dire qu'elle disparaît au survol.
Voici le code CSS complet pour cette animation :(menuIcon.css)
.menu{
margin: 1em;
width: 40px;
cursor: pointer;
}
.menu:after,
.menu:before,
.menu div {
background-color:black;
border-radius: 3px;
content: '';
display: block;
height: 5px;
margin: 7px 0;
transition: all .2s ease-in-out;
}
.menu:hover:before {
transform: translateY(12px) rotate(135deg);
}
.menu:hover:after {
transform: translateY(-12px) rotate(-135deg);
}
.menu:hover div {
transform: scale(0);
}
Le résultat est le suivant :
Exemple 3 : Définir des propriétés CSS et une fonction JavaScript pour animer l'icône de menu
Une autre méthode pour créer une icône de menu consiste à définir une fonction JavaScript qui est appelée à chaque fois que l'on clique sur la barre pour l'animer.
CSS
Pour écrire le code CSS, nous définissons une classe menu similaire à l'exemple précédent. Au lieu de pseudo-éléments, nous créons trois classes pour chaque barre (.before, .mid et .after). Nous appliquons ensuite la logique de transformation de chaque barre de l'icône comme à l'exemple précédent.
.menu{
margin: 1em;
width: 40px;
cursor: pointer;
}
.before, .mid, .after {
background-color: #333;
width: 40px;
height: 5px;
margin: 6px 0;
transition: all .2s ease-in-out;
}
.change .before {
transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .mid {
transform: scale(0);
}
.change .after {
transform: rotate(45deg) translate(-8px, -8px) ;
}
JavaScript
Une fois le code CSS prêt, nous définissons une petite fonction JavaScript pour déclencher la transformation de l'icône de menu en une icône en forme de croix. Nous appellerons cette fonction dans le fichier HTML de manière à ce que la transformation de l'icône en X se produise au clic de la souris.
function menuIcon(x) {
x.classList.toggle("change");
}
HTML
Nous définissons la fonction JavaScript dans la balise <script> dans notre fichier HTML et incluons les propriétés CSS définies dans le fichier menuIcon.css. Le fichier HTML final ressemble à ceci :
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated JavaScript Menu Icon - Tutorials Grey</title>
<link rel = "stylesheet" href = "menuIcon.css">
</head>
<body>
<p>Cliquer sur l'icône de menu pour la changer en X :</p>
<div class="menu" onclick="menuIcon(this)">
<div class="before"></div>
<div class ="mid"></div>
<div class="after"></div>
</div>
<script>
function menuIcon(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>
Lorsque nous chargeons le fichier HTML dans un navigateur, le résultat devrait ressembler à ceci :
En cliquant sur l'icône dE menu, elle se transforme en X :
Conclusion
Voici donc quelques exemples de la manière dont nous pouvons créer et animer des icônes de menu à l'aide de simples propriétés CSS et du HTML. D'autres options peuvent être essayées en modifiant la logique de transformation de la barre d'icônes. Il existe de nombreux autres types de transformation des icônes de menu que nous rencontrons quotidiennement sur différentes pages web. Certaines d'entre elles sont très intéressantes à regarder. Mais maintenant que vous connaissez la logique de base pour créer l'icône de menu emblématique, il sera amusant d'essayer différentes logiques de transformation.
