Animated Hamburger Menu — CSS Icon Morph Snippet

An animated hamburger menu is one of the most-searched UI snippets because the three-line icon that smoothly morphs into an X is the universal mobile-navigation control (see the full hamburger nav), and getting the animation crisp is surprisingly fiddly. This snippet nails it with pure CSS transforms — no icon swap, no SVG library — and pairs it with an accessible toggle and a dropdown menu so it is a complete, drop-in navigation control.

Building three bars from one element

The clever part is that the icon uses a single element with two pseudo-elements instead of three separate divs. The .lines span is the middle bar; its ::before is the top bar (positioned top: -8px) and its ::after is the bottom bar (bottom: -8px). All three share the same width, height, color, and rounded corners. This keeps the markup to one element and makes the morph math clean, because the top and bottom bars are positioned relative to the middle one.

The morph into an X

When the button gets the .open class, three things happen at once, each transitioned smoothly. The middle bar fades out with background: transparent — it does not need to rotate, it just disappears. The top bar moves from top: -8px to top: 0 (sliding into the center) and rotates 45deg. The bottom bar moves from bottom: -8px to bottom: 0 and rotates -45deg. Now the two remaining bars overlap at the center at opposite 45° angles — a perfect X. Reverse the class and they slide back apart and un-rotate into the hamburger. Because the transition animates top, bottom, and transform together with a single easing curve, the morph feels like one fluid motion rather than separate movements.

Why transforms beat swapping icons

A common but inferior approach is to swap a hamburger SVG for an X SVG on click. That gives an instant, jarring change with no animation, and you maintain two icons. Morphing the same three bars with CSS transforms animates the transition for free, uses no images, scales to any size by changing the bar width and the 8px offset together, and inherits color via the bar's background. It is also GPU-friendly: transform and opacity are cheap to animate, so the morph runs at 60fps even on low-end phones.

The accessible toggle

The button is a real <button> with the correct ARIA for a disclosure control: aria-label="Toggle menu" names it, aria-expanded reflects whether the menu is open ("false"/"true", kept in sync by the click handler), and aria-controls="menu" points at the menu it opens. The tiny toggleBurger function toggles the .open class on the button (driving the X morph), updates aria-expanded, and toggles the .show class on the menu. Using a native button means it is keyboard-focusable and activates on Enter/Space, and screen readers announce it as an expandable menu button.

The menu it controls

The dropdown menu animates in with the standard opacity + transform: translateY fade-and-slide, and is hidden with pointer-events: none while closed so it cannot be clicked when invisible. This is the same robust show/hide pattern used for accessible dropdowns — it animates (unlike display: none) and stays out of the way when closed. The menu links have hover states and comfortable tap targets. In a real navbar you would position the menu absolutely or as a full-screen overlay or side drawer on mobile; here it sits below the button to demonstrate the wiring.

Customizing the icon

Change the bar color via the background on .lines (and its pseudo-elements share it). Resize by adjusting the bar width (26px) and the 8px vertical offset of the top/bottom bars together — keep the offset roughly a third of the bar width for balanced spacing. Speed up or slow the morph with the transition 0.3s duration, or swap the cubic-bezier for a bouncier feel. For a thinner, more minimal icon, reduce the bar height to 2px. The button's own size, background, and radius are independent of the icon, so you can drop the bars into any button shape.

Accessibility and behaviour notes

Keep aria-expanded in sync with the open state (the handler does this) so assistive tech announces the correct state. Add aria-hidden toggling or focus management if the menu is a modal overlay. For a production mobile nav, also close the menu on outside click and on Escape, and trap focus inside it when it is a full-screen overlay — small additions to the toggle handler. Respect motion preferences by wrapping the morph transition in @media (prefers-reduced-motion: reduce) so users who prefer less animation get an instant icon change. Because the control is a native button driving an aria-controls menu, the core accessibility is correct out of the box.