Comment créer son menu burger en HTML / CSS ?

Aujourd'hui, les smartphones sont plus largement utilisés pour les connexions sur le net que les ordinateurs. Les concepteurs web ont compris cet enjeu en créant un menu de navigation adapté aux versions mobiles des sites Internet : le menu burger.

D'une manière générale, le menu burger, connu également sous le nom de « menu hamburger » ou « menu latéral », est placé dans une zone supérieure de l'interface web ou mobile. Il regroupe un ensemble d'options et de fonctionnalités qui sont accessibles sur un seul bouton. Le menu burger est utilisé dans un site web ou une application pour :

• Masquer les fonctionnalités secondaires afin de gagner de l'espace sur l'écran.
• Épurer l'interface afin de réduire la charge mentale des utilisateurs.

Voici un exemple de site web utilisant l'icône menu burger :

Pourquoi utiliser un menu burger sur son site ?

L'objectif principal du menu burger est de fluidifier la navigation des utilisateurs sur l'interface mobile. Les raisons qui poussent les entreprises et les marques à utiliser ce type de menu sont nombreuses. Cependant, il est à noter que le menu burger offre quatre grands avantages :

• Un menu minimaliste, épuré et ergonomique.
• Un menu responsive, adapté aux petits écrans et à l'usage digital.
• Un menu facilement reconnaissable, adopté intuitivement par les internautes.
• Un menu qui permet un accès direct à l'information.
• Un menu qui donne accès aux fonctionnalités secondaires.
•  

Un menu minimaliste

Utiliser un menu burger permet de simplifier l'interface d'un site web. En effet, celui-ci limite le nombre de fonctionnalités pour offrir un design épuré, propre et sans fioritures. De cette façon, les utilisateurs peuvent naviguer sur le site sans être perturbés par les nombreuses options qu'il propose.

En masquant certaines fonctionnalités, le menu burger facilite également le travail de mise en page des concepteurs, lesquels bénéficient d'une plus grande ergonomie de leurs sites.

Un menu responsive

De par son graphisme, le menu burger est conçu pour s'adapter au design des sites et applications mobiles. Peu encombrant, il présente l'avantage d'apporter un gain de place considérable sur les écrans de petite taille et s'adapte parfaitement à l'usage tactile des appareils mobiles.

Un menu facilement reconnaissable

Omniprésent sur les sites Internet comme sur les applications mobiles, le menu burger est aujourd'hui un élément identifiable pour la plupart des utilisateurs. Familiarisés avec l'icône, ils comprennent parfaitement ce que cet élément représente et l'emploient instinctivement comme n'importe quelle autre option du site pour accéder aux contenus qui les intéressent.

Un menu qui permet un accès direct à l'information

Dans le menu burger, les options sont classées afin de faciliter la recherche des utilisateurs, ce qui rend l'interface plus rapide et accueillante. Les internautes accèdent ainsi directement aux informations qu'ils recherchent sur le site sans être obligés de parcourir tout son contenu. En déroulant ce menu, ils peuvent simplement cliquer sur les pages qui les intéressent.

Un menu qui donne accès aux fonctionnalités secondaires

Le menu burger est utilisé pour permettre aux visiteurs d'accéder facilement aux pages secondaires du site web. Ce type de menu est conçu pour les fonctionnalités de navigation les moins importantes, c'est-à-dire celles qui ne répondent pas directement à l'objectif du site. Pourtant, pour certains utilisateurs, les fonctionnalités secondaires peuvent s'avérer d'une grande utilité. À cet effet, le menu burger contribue à optimiser leur parcours.

Quels codes utiliser pour faire un menu burger ?

Différents codes et langages peuvent être utilisés pour créer un menu burger :

• HTML
• CSS
• JavaScript
  
  

En HTML

Pour comprendre comment réaliser un menu burger à partir d'une structure HTML, voici un exemple avec un code de "sidenav", ou barre de navigation latérale.

L'id #mySidenav est utilisé pour le JavaScript et la classe .sidenav pour le style CSS.

L'élément #closeBtn correspond quant à lui au bouton de fermeture, visible en forme de croix en haut à droite de la navigation.

L'élément <ul> permet de lister les liens qui apparaîtront dans le menu.

L'élément #openBtn désigne le bouton d'ouverture du menu burger, lequel est à styler dans le CSS.

Cet exemple a été repris sur le site : https://www.codeur.com/tuto/css/menu-burger-html-css/

En CSS

Le code CSS permet de déterminer le positionnement et l'affichage des éléments du menu burger en fonction de la largeur de l'écran.

La création de l'icône burger avec le code CSS nécessite de rédiger 2 éléments avec le HTML :

• Une <ul><li> qui comportera la liste de navigation.
• Une balise, située à l'extérieur de l'<ul>, qui prendra la forme du burger.

Grâce au CSS, le span#burger créé avec le code HTML prendra la forme des 3 barres horizontales de l'icône burger. Il se situe dans une balise <a> afin que les utilisateurs puissent cliquer sur l'ensemble de l'espace.

Ci-dessus, le code CSS est utilisé pour définir la largeur, la hauteur, l'arrière-plan, le mode d'affichage et la position du menu burger.

Ensuite, les pseudo-éléments before et after sont utilisés pour la création des barres du haut et du bas, ce qui va donner un burger fermé.

L'icône burger est désormais créée. L'utilisation du code JavaScript permettra d'intégrer l'aspect fonctionnel de cet élément.

Cet exemple a été repris sur le site : https://blog.lapasserelle.school/tutoriels/creer-un-menu-mobile-avec-css-et-javascript/

En JavaScript

Dans l'exemple qui suit, une fonction JavaScript showResponsiveMenu() est utilisée pour réaliser le menu burger. Les classes ou propriétés CSS permettant d'afficher ou de masquer le menu responsive vont être ajoutées ou supprimées à cette étape. Des variables représentant le menu, l'icône et la racine sont également créées.

La propriété root.style.overflowY a été modifiée pour annuler le défilement de la page lors de l'affichage du menu.

Cet exemple a été repris sur le site : https://iridescent.dev/posts/web/creer-un-menu-hamburger

Pour aller plus loin, découvrez comment évaluer votre site web en utilisant l'outil Website Grader ; ou découvrez les modèles de site web gratuits de HubSpot.