Full-screen hamburger mobile menu
A hamburger button that morphs into a cross and opens a full-screen menu: trapped focus, Escape to close and a call button at the bottom.
- Tailwind
- React
- CSS
- WordPress
Description
The “Menu” button keeps the same name and announces its state with aria-expanded; its three lines rotate into a cross. When it opens, focus moves to the first link, Tab and Shift+Tab cycle through the links, the call button and the cross, and the rest of the page becomes inert: screen readers included, nothing escapes the menu. Escape or the cross close the menu and return focus to the button; choosing a link closes it too. Page scrolling is locked while it is open. At the bottom, a box offers a direct call with the opening hours. Without JavaScript, the links stay displayed under the bar. Light and dark, AA contrast, and with prefers-reduced-motion the menu appears without animation.
Code
Loading the code…
Archive contents
menu-mobile-hamburger-plein-ecran-html-tailwind.zip3 files · 6 Ko
- index.html13 Ko
- README.md3 Ko
- LICENSE.md1 Ko
Tags
Updated on October 19, 2026.
In the same spirit

An Open / Closed pill for the site header, computed on the shop's local time, with French public holidays, exceptional closures and the next opening time.
- Tailwind
- React
- CSS
- WordPress

A floating button that appears after scrolling, glides back to the top of the page and shows reading progress.
- Tailwind
- React
- CSS
- WordPress

A table of contents that follows the reader through a long article and highlights the current section.
- Tailwind
- React
- CSS
- WordPress

Pagination
FreeComplete pagination with the current page, ellipses and previous/next arrows that are properly disabled.
- Tailwind
- React
- CSS
- WordPress