Skip to content

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
Open in a new tab

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
    Component
  • A floating button that appears after scrolling, glides back to the top of the page and shows reading progress.

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

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • Complete pagination with the current page, ellipses and previous/next arrows that are properly disabled.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component