Menu mobile hamburger plein écran
Un bouton hamburger qui se transforme en croix et ouvre un menu plein écran : focus piégé, fermeture à Échap et bouton d’appel en bas.
- Tailwind
- React
- CSS
- WordPress
Description
Le bouton « Menu » garde le même nom et annonce son état avec aria-expanded ; ses trois traits pivotent en croix. À l’ouverture, le focus va sur le premier lien, Tab et Maj+Tab tournent entre les liens, le bouton d’appel et la croix, et le reste de la page devient inerte : lecteurs d’écran compris, rien ne s’échappe du menu. Échap ou la croix referment le menu et rendent le focus au bouton ; un lien choisi le referme aussi. Le défilement de la page est bloqué tant qu’il est ouvert. En bas, un encadré propose d’appeler directement, avec les horaires. Sans JavaScript, les liens restent affichés sous la barre. Clair et sombre, contrastes AA, et avec prefers-reduced-motion le menu apparaît sans animation.
Code
Chargement du code…
Contenu de l'archive
menu-mobile-hamburger-plein-ecran-html-tailwind.zip3 fichiers · 6 Ko
- index.html13 Ko
- README.md3 Ko
- LICENSE.md1 Ko
Mots-clés
Mis à jour le 19 octobre 2026.
Dans le même esprit

Une pastille « Ouvert / Fermé » pour l'en-tête du site, calculée à l'heure de la boutique, avec jours fériés français, fermetures exceptionnelles et prochaine ouverture.
- Tailwind
- React
- CSS
- WordPress

Un bouton flottant qui apparaît après un défilement, remonte en douceur en haut de page et montre la progression de lecture.
- Tailwind
- React
- CSS
- WordPress

Sommaire de page
GratuitUne table des matières qui suit la lecture d'un long article et surligne la section en cours.
- Tailwind
- React
- CSS
- WordPress

Pagination
GratuitUne pagination complète avec page courante, points de suspension et flèches précédent/suivant correctement désactivées.
- Tailwind
- React
- CSS
- WordPress