Devenu incontournable sur les sites web et les applications, le menu dit "hamburger" ou "burger" peut se décliner de différentes manières. Symbolisé par un pictogramme ressemblant à un hamburger, celui-ci invite le visiteur à cliquer pour ouvrir un menu.
Très utile si votre menu contient de nombreuses rubriques, notamment sur mobile, il devient beaucoup moins pertinent si le menu n'affiche que trois ou quatre rubriques. Il faut donc se demander avant de le mettre en place s'il s'agit de la meilleure solution.
Minimaliste, sophistiqué, animé ou statique, nous allons voir dans ce tutoriel comment mettre en place ce type de pictogramme uniquement en CSS ainsi que le menu dans son ensemble.
Création de l'icône
On commence par placer un input de type checkbox (pour simuler un lien cliquable) auquel on attribue un identifiant unique et qu'on rattache à un label.
Dans le code HTML plus haut, vous aurez remarqué la présence d'un élément span à l'intérieur du label. En effet, celui-ci va nous servir à créer les trois barres. Le label, quant à lui, aura pour fonction de conteneur. Comme nous allons utiliser le positionnement CSS pour placer les barres, le label sera en position relative.
L'élément span passe alors en position absolue venant prendre place au centre, tandis que les pseudo-éléments constituent la première ainsi que la dernière barre.
On va ensuite utiliser les transformations CSS pour faire pivoter les barres. Tandis que la première et la deuxième vont fusionner pour ne faire qu'une seule barre, la troisième va venir croiser les deux autres barres et ainsi former une croix. Astucieux, n'est-il pas ?
Cette technique consiste en l'utilisation des ombres portées. Notre label sert de conteneur, tandis que l'élément span à l'intérieur constitue la barre centrale. Il nous suffit simplement d'ajouter une ombre portée négative pour la barre en haut et une ombre portée positive en ce qui concerne la barre du bas.
Nous allons à présent employer une autre technique, à savoir l'usage de la fonction linear-gradient().
Au lieu d'ajouter un arrière-plan uni identique à la barre centrale avec des pseudo-éléments, nous allons réaliser un dégradé linéaire qui va se répéter sur le label directement, de telle sorte qu'une moitié sera en couleur et l'autre moitié transparente.
Voici un graphique pour mieux comprendre la technique :
Vous souhaitez ajouter des coins arrondis à votre icône ? Il va falloir ruser et ajouter quelques lignes de code supplémentaires.
En effet, nous allons nous servir des dégradés radiaux pour créer les coins arrondis. En fait, nous allons placer des ronds à droite et à gauche de chaque barre.
Voici un graphique pour vous aider à comprendre le concept :
Une autre solution consiste à utiliser le modèle de rendu des grilles. Pour obtenir nos trois barres, il nous suffit de créer trois éléments HTML (ici des éléments span), puis de définir notre grille en CSS.
Dès lors que l'on clique sur l'icône, on regroupe la première et la dernière barres au centre, on fait disparaître celle au centre, puis on applique une rotation.
Un autre exemple où nous allons utiliser des transitions supplémentaires sur les pseudo-élements, ce qui va donner plus de mouvements à notre pictogramme. Cliquez sur l'icône ci-dessous :
Il existe bon nombre de transitions. Vous trouverez en bas du tutoriel des liens renvoyant vers d'autres exemples.
Accessibilité
Il est préférable d'ajouter pour l'accessibilité l'attribut aria-label soit dans l'input soit dans le label et d'y ajouter une légende afin que les personnes utilisant des lecteurs d'écran sachent à quoi sert la case à cocher.
Une autre solution plus efficace encore et qui conviendra à tout le monde, consiste à ajouter un terme comme "menu" par exemple dans le label. En effet, il se peut qu'une personne peu habituée à surfer ne connaisse pas la fonction de l'icône hamburger.
Il sera alors inutile d'ajouter l'attribut aria-label, le contenu à l'intérieur deviendrait redondant.
N'oublions pas également les personnes qui utilisent la navigation au clavier avec la pseudo-classe :focus-visible. Nous allons par ailleurs rendre le menu accessible pour ceux qui souffrent de troubles de la vision avec la requête média CSS prefers-reduced-motion :
Maintenant que nous avons vu comment créer l'icône hamburger, il nous reste à créer le menu en lui-même.
Il existe plusieurs manières de construire ce menu. Nous pouvons par exemple mettre en place un contenu caché où se trouve les rubriques et qui survient avec un effet de slide lorsqu'on clique sur l'icône.
On peut également créer un effet de toggle, un menu pleine page (fullscreen), un simple effet de fondu... Vous l'aurez compris, nous avons de nombreuses solutions à notre disposition.
Dans ce code on retrouve l'icône hamburger ainsi que les rubriques au sein de l'élément nav. Cette base servira pour les exemples qui suivent.
Effet slide :
Le slide est un classique. C'est sans doute l'approche la plus adéquate en terme d'expérience utilisateur. On cache le menu en utilisant les transformations CSS. Au moment du clic/tap sur l'icône, l'action de slide s'enclenche.
Dans ce dernier exemple, nous retrouvons le menu complet construit en "mobile first", c'est-à-dire que nous avons d'abord mis en place la version mobile avec un contenu caché sur la gauche et qui s'affiche avec un effet de slide.
Puis avec une requête media @media, nous avons ajusté le contenu du menu pour qu'il soit visible sur des écrans plus larges (à partir de 800px) et que nous avons placé sur le côté droit.
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis du tutoriel ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.
