Premium mobile menu overlay

Full-screen menu with backdrop blur, staggered link reveals, and animated hamburger-to-X. Pure CSS.

Navigation Captured JS-free

Use when — premium-feeling site that deserves a thoughtful mobile menu, not the default dropdown. The stagger reveal sells the polish. Always include a clear CTA at the bottom of the menu — closing the menu without a path forward wastes the open moment.

Live demo

Tap the hamburger.

Brand

The three moves working together

1. Hamburger to X — three spans inside a label. Top and bottom slide to the middle while rotating 45° and -45°; the middle one fades to opacity 0. Pure CSS via input:checked ~ .header .toggle__lines span.

2. Overlay fade-in — full-bleed dark with backdrop-filter: blur(20px) saturate(180%). The saturate boost makes the blurred page behind it pop with color.

3. Staggered link reveal — each <li> starts at opacity 0 and translateY(16px). On menu-open, the :checked ~ overlay li:nth-child(N) selector applies a different transition-delay to each — 120ms, 180ms, 240ms… The links cascade in.

The key CSS (stagger reveal)

.menu-list li {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 520ms var(--ease-out-expo),
              transform 520ms var(--ease-out-expo);
}
#toggle:checked ~ .menu-overlay .menu-list li {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
#toggle:checked ~ .menu-overlay .menu-list li:nth-child(1) { transition-delay: 120ms; }
#toggle:checked ~ .menu-overlay .menu-list li:nth-child(2) { transition-delay: 180ms; }
#toggle:checked ~ .menu-overlay .menu-list li:nth-child(3) { transition-delay: 240ms; }

Footer reveal (last to arrive)

.menu-footer { transition-delay: 480ms; }
  /* delays past the last menu item so the CTA feels like the "and finally..." moment */

Source: Chevy 55 mobile menu (user-uploaded HTML, 2026-05-18).