Dernière mise à jour le 6 avril 2022 par LMD

Le menu « burger », ainsi nommé en raison de sa forme, est souvent utilisé pour l’affichage sur écran réduit, sur smartphone par exemple. Il s’utilise donc la plupart du temps dans le cadre de la mise en place du responsive.

Voici un exemple de menu burger en pur css, sans utilisation de javascript.

Tout d’abord le code html. Lorsqu’il esxiste un menu standard qui laissera la place à un menu burger en dessous d’une certaine largeur d’écran, le plus simple est de placer deux menus dans le html.

<!-- le menu standard -->
<nav id="menu">
  <ul>
    <li><a href="city.html">City</a></li>
    <li><a href="technic.html">Technic</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
   </ul>
</nav>

<!-- le menu burger -->
<nav id="menu_burger">
  <input type="checkbox" />

  <span></span>
  <span></span>
  <span></span>

  <ul id=menu_panel>
    <li><a href="city.html">City</a></li>
    <li><a href="technic.html">Technic</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

En situation « normale », la première nav#menu sera affichée et la seconde nav#menu_burger sera cachée par un display: none; Sur smartphone, ce sera l’inverse.

Passons sur les css du menu standard, mis à l’horizontale grâce à flexbox.
Sur une règle responsive de petit écran, voici le css du burger :

@media screen and (max-width: 640px) {
  /* masquer le menu principal */
  #menu {
    display: none;
  }

  /* afficher le menu burger */
  #menu_burger {
    display: block;
    margin: 10px 0;
    z-index: 1;
    -webkit-user-select: none;
  }

  /* dessiner le burger*/
  #menu_burger span {
    display: block;
    width: 32px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #000;
    border-radius: 2px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
	              opacity 0.55s ease;
  }

  #menu_burger span:first-child {
    transform-origin: 0% 0%;
  }

  #menu_burger span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  /* placer la checkbox pour détecter le clic */
  #menu_burger input {
    display: block;
    width: 34px;
    height: 32px;
    position: relative;
    top: 28px;
    cursor: pointer;
    opacity: 0; /* cacher le bouton */
    z-index: 2; /* et le placer par dessus le burger */
    -webkit-touch-callout: none;
  }

  /* transformer le burger en croix, au clic */
  #menu_burger input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }

  #menu_burger input:checked ~ span:nth-last-child(3) {
    opacity: 0; /* cacher barre du milieu */
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  #menu_burger input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }

  /* cacher initialement le panneau du menu */
  #menu_panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; /* largeur de l'écran */
    height: 100vh; /* hauteur de l'écran */
    /* décaler menu sous la croix */
    padding-top: 300px;
    background-color: rgba(164, 24, 10, 1);

    list-style-type: none;
    text-align: center;

    /* to stop flickering of text in safari */
    -webkit-font-smoothing: antialiased; 
    
    transform-origin: 0% 0%;
    transform: translate(-100%, 0%);*/
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }

  /* aspect du menu */
  #menu_panel li{
    padding: 10px 0;
    font-size: 22px;
  }

  #menu_burger a{
    text-decoration: none;
    color: #fff;
    transition: color 0.3s ease;
  }

  #menu_burger a:hover{
    color: #000;
  }

  /* animer le menu au clic */
  #menu_burger input:checked ~ ul{
    transform: none;
  }
}