L'icône menu "Hamburger" est de plus en plus à la mode sur les sites web et applications mobiles. L’intérêt du menu "Hamburger", c’est qu’il laisse de l’espace libre pour le contenu, ce qui est très pratique sur un écran mobile par exemple.
Vous pouvez utiliser un icône menu "Hamburger" pour libèrer de la place sur l’écran avec le système du sidebar menu ou navigation “tiroirs”.
Une fois déployée, un icône menu "Hamburger" vous permet de visualiser l’ensemble des rubriques ou options que propose votre site. Il donne également la possibilité de proposer une navigation riche.
Sur cette page, vous allez apprendre créer un icône menu "Hamburger" avec CSS.
Comment créer un icône menu "Hamburger" ?
Si vous ne voulez pas utiliser de bibliothèque d'icônes, vous pouvez créer votre propre icône menu "Hamburger" de base en utilisant du CSS.
Code HTML & CSS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 40px;
height: 7px;
background-color: black;
margin: 6px 0;
}
</style>
</head>
<body>
<p>Menu Icon - Icône menu "Hamburger"</p>
<div></div>
<div></div>
<div></div>
</body>
</html>
Dans le code ci-dessus, les propriétés "width" et "height" spécifient la largeur et la hauteur de chaque barre.
En utilisant les propriétés "background-color" et "margin", nous avons ajouté une couleur de fond noire, et les marges supérieure et inférieure qui sont utilisées pour créer une certaine distance entre chaque barre.
Le résultat se présente comme à l'image ci-dessous :
Comment créer un icône menu "Hamburger" animé ?
Vous pouvez utiliser le CSS et le JavaScript pour transformer votre icône menu "Hamburger" et l'animer à chaque fois que l'on clique dessus.
Code HTML, CSS & JavaScript
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
</style>
</head>
<body>
<p>Cliquez sur l'icône menu "Hamburger" pour le tranformer en "X"</p>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>
Dans cet exemple, nous avons utilisé le même code HTML avec les mêmes styles CSS que précédemment, mais cette fois-ci, nous spécifions un nom de classe pour chacun pour chacun de nos <div> que nous plaçons à l'intérieur d'un autre <div> avec la classe "container".
L'élément <div> de classe "container" est utilisé pour afficher un curseur pointeur lorsque l'utilisateur déplace la souris sur les <div> (barres) qu'il contient. Lorsqu'il est cliqué, il exécute une fonction JavaScript qui lui ajoute un nouveau nom de classe, lequel modifie le style de chaque barre horizontale : la première et la dernière barre sont transformées et pivotées en la lettre "X". La barre du milieu quant à elle s'efface et devient invisible.
Le résultat se présente comme à l'image ci-dessous :
Et lorsque vous cliquez sur l'icône, elle se change en un "X" comme à l'image ci-dessous :
