Tuto : Créer une icône hamburger animée avec les pseudo-éléments CSS

Il existe des pans du HTML trop peu connu ou utilisés, alors qu’ils ne posent pas réellement de soucis en matière de complexité ou portabilité. Parmi eux se trouvent les pseudo-éléments before et after.

Les pseudo-éléments existent depuis suffisamment longtemps pour avoir un bon parc navigateur : près de 90% des navigateurs semblent l’accepter. Il est donc tout à fait possible de l’utiliser dans un but d’amélioration graphique, et toucher la très grande majorité des gens.

Ces pseudo éléments permettent de créer des éléments uniquement avec le CSS, sans qu’ils aient à être présent dans le HTML, pour une meilleure séparation entre la forme et le fond.

Pour suivre ce tutoriel, je vous conseille l’utilisation d’un CSS playground, comme Codepen par exemple.

Notre objectif est de créer une icône de menu comme celui-ci que l’on pourra animer. Pour commencer, un passage oblige par le HTML, avec un code très simple.

<a>
<div class= »burger »></div>
</a>

Une fois dans notre style, où se passera le reste du tutoriel, créons une barre horizontale simple.

/* L’element */
.burger {
position: absolute;
width: 24px;
height: 4px;
background: blueviolet;
}

Maintenant que ceci est fait, nous allons utiliser les pseudo-éléments pour créer un élément au-dessus et en dessous de notre barre. Notez qu’il est important de préciser que nos éléments sont des blocs, et qu’ils ont un content vide.

.burger::before, .burger::after {
content: «  »;
display: block;
}

Nos éléments existent, c’est bien, occupons-nous de leur donner un style maintenant. Le même que notre barre centrale sera parfaite, à l’exception d’une margin servant d’espacement entre les barres.

/* L’element */
.burger, .burger::before, .burger::after {
position: absolute;
width: 24px;
height: 4px;
background: blueviolet;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.burger::before {
margin-top: -8px;
}
.burger::after {
margin-top: 8px;
}

Notre icône est en place ! Maintenant, occupons-nous de son animation : lors d’un survol, le hamburger doit se transformer en une croix comme celle-là:

/* L’animation */
.burger:hover {
/* L’opacite se propagerait aux pseudoelements, donc
* on change la background-color
*/
background: white;
}
.burger:hover::before {
margin-top: 0px;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.burger:hover::after {
margin-top: 0px;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

Vous trouverez le code complet sur cette page codepen.