Fullscreen Menu — Animated Nav Overlay HTML CSS JS

A fullscreen menu is the bold navigation pattern where tapping the hamburger expands a full-viewport overlay of large links — common on agency, portfolio, and editorial sites. This snippet builds it in plain HTML, CSS, and vanilla JavaScript: a clip-path circle reveal from the menu button, links that stagger in, an animated hamburger-to-X, scroll lock, and the expected close behaviours — no library.

A circular clip-path reveal

Instead of a plain fade, the overlay reveals with an expanding circle: clip-path: circle(0% at …) anchored at the menu button's position grows to circle(150% …) on open, so the menu appears to spread out from the button the user tapped. Animating clip-path is GPU-friendly and far more distinctive than opacity alone — it's the signature "wipe open from the corner" effect, and anchoring the circle at the button ties the overlay's origin to the trigger.

Staggered link entrance

The nav links don't all appear at once. Each <li> carries a custom property --i (its index), and the open state translates each link up into place with a transition-delay of base + i × step — so they cascade in one after another. Driving the stagger with a CSS custom property and calc() means the delay is data-free CSS (no per-link JavaScript), and adding a link is just another <li> with the next index. The links start translated down and clipped by their overflow: hidden parent, so they rise into view like a reveal.

Hamburger that becomes an X

The toggle's three bars animate into a close X: the top and bottom bars translate to the centre and rotate ±45°, the middle fades out. This morph is pure CSS driven by an fm-on class, and the bars switch colour to stay visible against the dark overlay. A single toggle handler opens or closes based on the current state.

Scroll lock and accessible close

Opening sets body { overflow: hidden } so the page behind can't scroll — essential for a full-viewport overlay, or the background scrolls under the menu. The overlay closes on Escape, on choosing any link, and on the toggle, all routed through one close() that also restores scroll, resets the hamburger, and updates aria-expanded/aria-hidden so the state is announced to assistive tech.

Drop-in and adaptable

It's a complete navigation overlay — wire the links to your routes, restyle the type and colours, and adjust the clip-path origin to your button's position. It's a clear reference for clip-path reveals, CSS custom-property staggering, and the scroll-lock-and-close lifecycle every fullscreen menu needs.