Créer une navigation responsive sans JavaScript
Un menu hamburger fonctionnel avec uniquement du HTML et du CSS : c'est possible, et bien plus simple qu'on ne le croit.
La plupart des tutoriels sur les menus hamburger embarquent un fichier JavaScript, quelques dizaines de lignes d'événements et une dépendance de plus à maintenir. Pourtant, la combinaison d'une case à cocher HTML et de quelques règles CSS suffit à obtenir un résultat propre, accessible et performant.
Le principe repose sur un élément `<input type="checkbox">` couplé à un `<label>`. Quand l'utilisateur clique sur l'icône hamburger, qui est en réalité le label, l'état coché ou non coché de la case change. CSS peut détecter ce changement grâce au sélecteur `:checked` et au combinateur `~` pour afficher ou masquer le menu.
Structurer le HTML correctement
Commencez par placer la checkbox et son label avant l'élément `<nav>` dans le DOM, car le combinateur `~` ne remonte pas dans l'arbre. Donnez un `id` à votre checkbox et reliez-la au label via l'attribut `for`. Masquez visuellement la checkbox avec `position: absolute; opacity: 0` plutôt qu'avec `display: none`, afin de conserver l'accessibilité clavier.
Votre `<nav>` reçoit par défaut `max-height: 0; overflow: hidden; transition: max-height 0.3s ease`. Quand la checkbox est cochée, la règle `input:checked ~ nav` lui applique `max-height: 400px`. L'animation se fait toute seule, sans une seule ligne de JS.
Soigner l'accessibilité
Ajoutez un attribut `aria-expanded` sur le label et mettez-le à jour… attendez, on voulait éviter le JS. La solution : utilisez l'attribut `aria-controls` sur le label et acceptez que pour l'accessibilité avancée, une ligne de JS reste la meilleure option. Pour un projet simple ou un prototype rapide, la version pure CSS est largement suffisante.
Pensez également à tester votre menu au clavier : la touche Espace doit ouvrir et fermer le menu puisque l'élément actif est bien un `<input>`. Sur les lecteurs d'écran, annoncez clairement l'état du menu grâce à un texte masqué visuellement mais présent dans le DOM.
Cette technique fonctionne sur tous les navigateurs modernes et même sur des navigateurs plus anciens qui supportent `:checked`. Elle réduit le poids de la page, supprime une dépendance et améliore le temps de rendu initial, trois bonnes raisons de l'adopter sur vos projets légers.