À l’ère du « mobile-first », optimiser l’expérience utilisateur sur mobile est essentiel. L’icône de menu, reconnaissable à ses trois lignes horizontales, est devenue un standard pour simplifier la navigation sur les petits écrans. Un menu de navigation mobile par défaut peut paraître générique, sans refléter votre image de marque.
Ce tutoriel vous guide pas à pas dans la création et la personnalisation d’un menu hamburger CSS, afin de l’adapter à vos besoins et d’offrir une navigation mobile optimale. Nous explorerons différentes techniques, allant des bases HTML et CSS aux animations avancées et à l’accessibilité, tout en réduisant l’utilisation de JavaScript.
Les fondamentaux de la navigation mobile
Avant de personnaliser votre menu, comprenons sa structure. Cette section détaille le code HTML requis et le style CSS minimal pour un menu fonctionnel et accessible.
Structure HTML : la base du menu
Le menu de navigation mobile repose sur une structure simple : un bouton, un conteneur et les éléments de menu. Le bouton déclenche l’affichage, tandis que le conteneur englobe les liens de navigation.
- Le bouton : Une balise `button`, un `label` associé à une case à cocher cachée, ou une simple `div` stylisée. L’important est qu’il soit cliquable et identifiable.
- Le conteneur : Généralement une balise `nav` ou `ul`, contenant les liens de navigation.
- Les éléments : Chaque lien est enveloppé dans une balise `li` contenant une balise `a` pour le lien hypertexte.
Différentes approches existent pour le bouton. Utiliser une balise `button` avec les attributs ARIA (`aria-label`, `aria-expanded`) est conseillé pour l’accessibilité. Une autre méthode est d’utiliser des balises `span` ou `div` stylisées en CSS. Enfin, un SVG (Scalable Vector Graphics) offre une icône vectorielle adaptable.
<button class="hamburger" aria-label="Menu" aria-expanded="false"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </button> <nav class="menu"> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Services</a></li> <li><a href="#">À propos</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
CSS de base : style et masquage
Le CSS de base se concentre sur le style du bouton et le masquage du menu. Le positionnement du bouton (fixed ou absolute) est essentiel. L’apparence (formes, couleurs, marges) doit être soignée. Le menu, lui, est masqué avec `display: none` ou hors écran jusqu’à l’activation.
- Style du bouton : Positionnement, apparence.
- Masquage du menu : Utilisation de `display: none`.
- Largeur du menu : Définition de la largeur.
- Style des éléments : Style de base des liens.
.hamburger { position: fixed; top: 20px; right: 20px; width: 30px; height: 30px; cursor: pointer; } .hamburger .line { width: 100%; height: 3px; background-color: black; margin-bottom: 5px; transition: all 0.3s ease; } .menu { position: fixed; top: 0; right: -300px; /* Hors écran par défaut */ width: 300px; height: 100%; background-color: white; padding: 20px; transition: all 0.3s ease; } .menu ul { list-style: none; padding: 0; margin: 0; } .menu li { margin-bottom: 10px; } .menu a { text-decoration: none; color: black; }
Activer le menu : méthodes CSS
Activer le menu est crucial. Plusieurs techniques CSS gèrent l’affichage et le masquage, chacune ayant ses spécificités. Examinons les plus courantes.
La technique `:checked` et `label` : pure CSS
Cette méthode utilise une case à cocher cachée (`input[type= »checkbox »]`) et un label associé. Cliquer sur le label (le bouton) modifie l’état de la case à cocher. La pseudo-classe `:checked` cible le menu et change son affichage selon l’état de la case. C’est purement CSS et simple, mais moins flexible pour les animations.
<input type="checkbox" id="menu-toggle" style="display: none;"> <label for="menu-toggle" class="hamburger"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </label> <nav class="menu"> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Services</a></li> <li><a href="#">À propos</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <style> #menu-toggle:checked ~ .menu { right: 0; /* Affiche le menu */ } </style>
Utiliser la pseudo-classe `:focus-within` : accessibilité
La pseudo-classe `:focus-within` cible un élément s’il a le focus, ou si un de ses enfants l’a. Cela peut servir à afficher le menu quand le bouton ou un élément du menu est sélectionné (par exemple, au clavier). C’est intéressant pour l’accessibilité, mais requiert une bonne gestion du focus.
Classes CSS dynamiques : JavaScript simplifié
Pour plus de flexibilité, une classe CSS (par exemple, `.active`) ajoutée/supprimée avec JavaScript peut être utilisée. Cela permet des animations plus complexes et un contrôle plus précis. Bien qu’un peu de JavaScript soit nécessaire, c’est simple à mettre en place.
<button class="hamburger" id="hamburger-button"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </button> <nav class="menu"> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Services</a></li> <li><a href="#">À propos</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <script> const hamburgerButton = document.getElementById('hamburger-button'); const menu = document.querySelector('.menu'); hamburgerButton.addEventListener('click', () => { menu.classList.toggle('active'); }); </script> <style> .menu.active { right: 0; } </style>
Personnalisation avancée : créez votre propre style
La personnalisation est primordiale pour un menu qui reflète l’identité de votre site. Explorons les animations, les styles, l’icône et la gestion des couleurs.
Animations et transitions CSS : donnez vie à votre menu
Les animations CSS transforment un menu basique en une expérience engageante. Transitions pour des effets simples, keyframes pour des animations complexes. `cubic-bezier` permet des animations fluides.
Par exemple, pour un menu qui glisse depuis la gauche, vous pouvez utiliser la propriété `transform: translateX(-100%);` pour le menu caché, puis `transform: translateX(0);` quand il est actif, avec une transition CSS pour l’effet de glissement.
Styles de menu : plein écran, sidebar, déroulant
Différents styles existent. Le choix dépendra du design et de l’UX souhaitée.
- Menu plein écran : Recouvre l’écran, offrant de l’espace pour la navigation.
- Menu sidebar : Glisse du côté, laissant voir le contenu principal.
- Menu déroulant : Se déroule verticalement, idéal pour les menus simples.
Icône personnalisée : alternatives à l’hamburger
L’icône peut être personnalisée : une icône SVG, une icône animée, ou même du texte (« Menu »). Pour une icône SVG, vous pouvez utiliser un éditeur comme Inkscape ou Illustrator pour créer une icône qui correspond à votre identité visuelle et l’intégrer ensuite dans votre code HTML.
Typographie et couleurs : harmonie visuelle
La typographie et les couleurs sont essentielles. Choisissez une typographie lisible et cohérente, une palette de couleurs harmonieuse et assurez un contraste suffisant pour l’accessibilité. Pour garantir l’accessibilité, vérifiez le contraste des couleurs avec un outil comme le « WebAIM Contrast Checker ».
Accessibilité et bonnes pratiques : un menu pour tous
Un menu accessible est vital pour que tous les utilisateurs puissent naviguer facilement. Utilisons les attributs ARIA, gérons la navigation au clavier, et testons et optimisons.
Attributs ARIA : rendez le menu accessible
Les attributs ARIA ajoutent des informations sémantiques au code HTML, rendant le menu accessible aux lecteurs d’écran. Utilisez `aria-expanded`, `aria-label` et `aria-hidden` pour l’état du menu, sa description et le masquage du contenu.
Par exemple : <button class= »hamburger » aria-label= »Ouvrir le menu de navigation » aria-expanded= »false » onclick= »toggleMenu() »></button> aria-expanded indique si le menu est visible ou non. Le JavaScript est utilisé pour inverser cette valeur et modifier l’affichage du menu.
Navigation au clavier : facilitez la navigation
Assurez une navigation intuitive au clavier. La gestion du focus (tabindex) est essentielle. Empêchez le focus de sortir du menu (focus trap), en utilisant JavaScript si nécessaire.
Le focus trap peut être implémenté en JavaScript en interceptant la touche « Tab » et en redirigeant le focus vers le premier ou le dernier élément focusable du menu lorsqu’il atteint les limites.
Tests et optimisation : assurez la compatibilité
Testez votre menu sur différents appareils et navigateurs. Optimisez le code CSS (minification, compression). Utilisez des outils de développement pour identifier les problèmes d’accessibilité et de performance.
Utilisez des outils tels que Google Lighthouse, disponible directement dans Chrome DevTools, afin de vérifier l’accessibilité, la performance et les bonnes pratiques de votre menu.
Exemples avancés : inspirez-vous !
Allons plus loin avec des exemples de menus avancés, comme les menus multi-niveaux et l’intégration avec des frameworks CSS.
Menu Multi-Niveaux : navigation complexe
Implémenter un menu avec des sous-menus nécessite une gestion soignée de l’affichage et de la fermeture des sous-menus. Soignez l’UX, évitez la surcharge et facilitez la navigation.
Un exemple d’implémentation pourrait être l’utilisation de la balise <details> et <summary> pour les sous-menus, permettant ainsi d’afficher ou de masquer le contenu en cliquant sur la summary.
Intégration avec des frameworks CSS : bootstrap et tailwind CSS
Bootstrap et Tailwind CSS offrent des menus par défaut. Personnalisez-les pour vos besoins. L’utilisation de ces frameworks simplifie le développement, mais il faut comprendre leurs limites et savoir les adapter. Dans Bootstrap, la classe « navbar-toggler » permet de contrôler le comportement du menu. Tailwind CSS offre une personnalisation granulaire avec ses classes utilitaires.
N’oubliez pas que même en utilisant ces frameworks, il est important de tester l’accessibilité du menu créé.
Optimisation de l’expérience mobile : un menu adapté à vos utilisateurs
Le menu est essentiel à l’expérience mobile. Personnalisez-le esthétiquement et fonctionnellement pour une navigation agréable. Intégrez l’accessibilité et testez sur différents appareils pour une expérience optimale et une image de marque renforcée.
N’oubliez pas que la simplicité et l’intuitivité sont souvent les clés d’une bonne expérience utilisateur sur mobile. Un menu trop complexe ou difficile à naviguer peut décourager les visiteurs de votre site.