Créer un menu mobile avec CSS et JavaScript

Le menu mobile se sert de la navigation par défaut (généralement une ul) déjà utilisée sur desktop. Elle sera simplement masquée par défaut, et il faudra cliquer sur un élément pour la faire apparaître. Il s’agira généralement d’un icône burger.

L’icône burger

On a plusieurs possibilités pour réaliser cet élément : utiliser une image, une police d’icônes type FontAwesome ou bien le créer nous même en CSS ! C’est ce que nous allons faire ici.

Nous aurons donc besoin d’une ul>li qui contiendra la navigation mais également d’une balise (à l’extérieur de cette ul) qui prendra la forme de notre burger.

<nav>
    <a id="link" href="#"><span id="burger"></span></a>
    <ul class="list-unstyled">
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Formation</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

Le span#burger prendra, grâce au CSS, la forme de 3 barres horizontales et parallèles entre elles. Ce dernier est lui-même dans une balise a afin que le clic ne se fasse pas seulement sur les 3 barres mais bien sur l’ensemble de l’espace (donc également entre les 3 barres).

#burger {
  width:30px;
  height:2px;
  background:white;
  display:inline-block;
  position:relative;
}

Ce code permet d’indiquer que la barre centrale fera 30px de large sur 2px de hauteur.

#burger::before,
#burger::after {
  content:'';
  width:30px;
  height:2px;
  background:white;
  display:inline-block;
  position:absolute;
  transform-origin: center;
  transition: all 0.3s ease;
}
#burger::before {
  top:-7px;
}
#burger::after {
  top:7px;
}

On utilise ses pseudo-éléments before et after pour créer les barres du haut et du bas. Nous avons donc là notre burger fermé. Quand nous cliquerons dessus, ce dernier prendra une classe .open.

#burger.open {
  background:transparent; /* la barre du milieu disparait */
}
/* celles du haut et du bas s'inclinent pour former une croix */
#burger.open::before {
  transform: rotate(45deg); 
  top:0;
}
#burger.open::after {
  transform: rotate(-45deg);
  top:0;
}

Notre burger étant fait, il ne reste plus qu’à rajouter l’aspect fonctionnel grâce au JavaScript.

Menu mobile en vanillaJS

Nous n’utilisons pas jQuery pour faire ce menu, mais la logique reste la même. Ainsi, il vous suffira d’adapter les sélections d’éléments et manipulation de classes pour arriver au même résultat.

Fonctionnement d’un menu mobile

1. On clique sur l’icône burger
2. Cela change l’aspect de l’icône en lui attribuant la classe .open s’il ne l’a pas déjà, ou en la lui enlevant si elle lui était déjà attribuée
3. Cela fait apparaître la ul en jouant la aussi sur une classe .open

/* Sélection des éléments HTML */
let link = document.getElementById('link')
let burger = document.getElementById('burger')
let ul = document.querySelector('ul')

/* gestionnaire d'événement sur le a#link pour venir changer l'attribution de la classe .open à la ul et au span#burger */
link.addEventListener('click', function(e) {
  e.preventDefault()
  burger.classList.toggle('open')
  ul.classList.toggle('open')
})

La fonction toggle permet de gérer automatiquement le fait d’enlever ou ajouter la classe à l’élément selon s’il l’a déjà ou pas.

Envie de devenir un pro du web ?

Et si vous alliez beaucoup plus loin et que vous deveniez un professionnel du web ? Nous proposons des formations bootcamp centrées sur les métiers du numérique : Développeur web et web mobile et UI-UX design.

Articles qui pourraient vous intéresser

Créer un bouton avec un angle coupé

À quoi sert la propriété CSS z-index ? Et comment l’utiliser ?

Appliquer un filtre couleur sur une image en background en CSS