Three lines that morph into an X. Fullscreen overlay with staggered link reveals. Tap the icon in the demo.
On mobile screens, there isn't room for all navigation links. The hamburger menu hides all navigation behind a single icon. Tapping it reveals the full navigation — either as a fullscreen overlay, a side drawer, or a dropdown panel.
Three horizontal div elements (or a custom SVG) form the icon. When clicked, JS toggles a class on a fullscreen overlay. The three lines animate into an X using CSS transforms: the top line rotates 45°, the middle line fades to opacity:0, the bottom line rotates -45°. The overlay menu appears with a fade or slide-in transition.
Click the burger icon in the top-right of the demo. Links stagger in.
The hamburger in the top right is a real component. Click it. The three lines fold into an X, a black overlay fills the screen, and five links cascade in from below — each one slightly delayed from the previous.
Click again to close. Press Escape if you prefer.
Build a fullscreen hamburger menu for mobile. Three-line hamburger icon: each line is 24px wide, 2px tall, dark color, with 5px gap between them. When clicked, animate to X: top line rotates 45deg and translates down, middle line fades to opacity:0, bottom line rotates -45deg and translates up. The fullscreen menu overlay uses position:fixed, inset:0, background:#0A0A0A, z-index:9999. Navigation links appear centered, large (40px), white, with a stagger fade-in (each link 0.05s later). Include close button (X) in top right. Body scroll should be locked when menu is open (overflow:hidden on body).