Créer un burger menu en HTML et CSS peut se faire de plusieurs façons. Une manière de faire est de réaliser un menu s’ouvrant sur le côté : ce type de navigation est plus pratique pour l’utilisateur sur mobile, plutôt qu’un menu se déployant à l’intérieur de la page, de haut en bas. Nous allons voir le code complet d’un exemple, qu’on appellera « sidenav ».
Sommaire :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.
Trouver un développeur web
Le HTML
Voici le template HTML de notre sidenav :
<div id="mySidenav" class="sidenav">
<a id="closeBtn" href="#" class="close">×</a>
<ul>
<li><a href="#">A propos</a></li>
<li><a href="#">Nos services</a></li>
<li><a href="#">Témoignages</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<a href="#" id="openBtn">
<span class="burger-icon">
<span></span>
<span></span>
<span></span>
</span>
</a>
La classe .sidenav servira pour le style CSS, l’id #mySidenav sera utilisé pour le JS.
L’élément #closeBtn est notre bouton de fermeture (une petite croix en haut à droite de la navigation).
La liste ul contient les liens de notre navigation.
#openBtn est le bouton d’ouverture de notre menu, à l’intérieur l’icône burger, que l’on va styler dans notre CSS.
Le CSS
Voici le style de nos éléments :
/* Sidenav menu */
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: -250px;
background-color: #e8e8e8;
padding-top: 60px;
transition: left 0.5s ease;
}
/* Sidenav menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #111;
}
.sidenav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Active class */
.sidenav.active {
left: 0;
}
/* Close btn */
.sidenav .close {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
}
/* Icône burger */
.burger-icon span {
display: block;
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
En voici le fonctionnement clé :
Notre sidenav fait 250px de largeur. C’est important de le noter pour pouvoir cacher notre menu. L’élément est en position fixed, avec un top à 0 (positionné au desus), un hauteur de 100% de l’écran et décalé d’un left négatif de -250px (c’est à dire de sa largeur). Ainsi, notre menu est invisible, car en dehors de l’écran. On ajoute le sélecteur .sidenav.active, et la propriété left: 0. Si dans le HTML on ajoute la classe .active à notre menu, il deviendra visible avec un left de 0. Avec la propriété transition: left 0.5s ease;, le switch de notre menu sera animé, plus agréable pour l’utilisateur. Il suffira de faire le switch de classe en JS. Le z-index est là pour s’assurer que le menu passe au dessus de la page HTML, il est mis à 1 dans notre exemple mais il faudra peut être l’augmenter en fonctionnement de votre contenu.
Trouvez le meilleur développeur web sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Le JS
Et voici le Javascript de notre sidenav :
var sidenav = document.getElementById("mySidenav");
var openBtn = document.getElementById("openBtn");
var closeBtn = document.getElementById("closeBtn");
openBtn.onclick = openNav;
closeBtn.onclick = closeNav;
/* Set the width of the side navigation to 250px */
function openNav() {
sidenav.classList.add("active");
}
/* Set the width of the side navigation to 0 */
function closeNav() {
sidenav.classList.remove("active");
}
On crée 3 variables, représentant chacune notre sidenav, less bouton d’ouverture et de fermeture.
Ensuite, on crée 2 fonctions, une ouvrant la navigation, l’autre la fermant. Pour ce faire, on utilise les éléments définis précédemment, avec la propriété classList, permettant d’ajouter ou de supprimer très simplement la classe .active (qui permet donc de faire apparaître ou disparaître le menu). On attribue des fonctions aux évènement onclick des 2 boutons, et le tour est joué !
Conclusion
Vous avez à présent une bonne base de sidenav ! Cet exemple est très simple, ce qui le rend facilement customisable. Une évolution logique serait de réutiliser le même HTML pour créer une barre de navigation en format d’écran desktop et de cacher le bouton burger, puis de créer une media query affichant la sidenav et le burger. Réutilisez bien le même HTML, il vaut mieux ne pas dupliquer les liens dans votre page !
Si vous n’arrivez pas à créer un burger menu, n’hésitez pas à demander de l’aide à un freelance sur Codeur.com !
