1 Pure CSS7 with JSPublished 2026-10-04Free · no sign-up
Eight hamburger icons and mobile menus: animated three-line icons that become a cross or an arrow, a button with a visible Menu label, a slide-out panel, a full-screen overlay, kebab and meatball icons, a two-stage squeeze animation and a simple dropdown list.
The classic three-line icon that morphs into an X when the menu opens. The middle bar fades out while the outer bars rotate into a cross, the button toggles aria-expanded, and its accessible name stays Menu in both states.
A variation where the three lines become a left-pointing arrow, useful when opening a menu means navigating back. The top and bottom bars shorten and rotate towards the left end of the middle bar, all with transforms.
Pairing the icon with the word Menu makes it clearer for people who do not recognise the three-line symbol. The visible text doubles as the accessible name, and the label changes to Close when the menu is open.
A complete mobile header: the hamburger opens a panel that slides in from the left. The button controls the panel with aria-controls and aria-expanded, Escape closes the panel and returns focus to the button, and the links are a normal list.
const mb = document.querySelector('.mb'), panel = document.getElementById('mnav');
function set(open) {
mb.setAttribute('aria-expanded', String(open));
panel.classList.toggle('open', open);
if (open) panel.querySelector('a').focus();
}
mb.addEventListener('click', () => set(mb.getAttribute('aria-expanded') !== 'true'));
document.addEventListener('keydown', e => { if (e.key === 'Escape' && panel.classList.contains('open')) { set(false); mb.focus(); } });
05. Full-Screen Overlay Menu
MenuOverlay
A bold full-screen menu for portfolio and agency sites: large links fade in one after another over a dark overlay. The stagger uses a custom property per item for its delay, and the overlay is hidden from the keyboard until it opens.
const fb = document.querySelector('.fsb'), fm = document.getElementById('fsm');
fb.addEventListener('click', () => {
const open = !fm.classList.contains('open');
fm.classList.toggle('open', open);
fb.setAttribute('aria-expanded', String(open));
fb.textContent = open ? 'Close' : 'Menu';
});
06. Kebab and Meatball Icons
IconOverflow
Overflow menu triggers drawn entirely in CSS: three vertical dots (kebab) and three horizontal dots (meatball), made from one dot plus two box-shadow copies. Each is a real button with an accessible name such as More options.
The bars first squeeze together into a single line, then rotate into an X, a two-stage motion made with transition delays that run in reverse when closing. It feels more mechanical and deliberate than a straight rotation.
A compact menu that drops down below the button instead of sliding in, suited to simple sites with four or five pages. Clicking outside closes it, Escape closes it and returns focus, and the open list is a normal set of links.
const db = document.querySelector('.ddb'), dl = document.getElementById('ddl');
function setOpen(o) { dl.hidden = !o; db.setAttribute('aria-expanded', String(o)); }
db.addEventListener('click', () => setOpen(dl.hidden));
document.addEventListener('click', e => { if (!e.target.closest('.dd')) setOpen(false); });
document.addEventListener('keydown', e => { if (e.key === 'Escape' && !dl.hidden) { setOpen(false); db.focus(); } });
About these CSS Hamburger Menus
The button, not the icon
A hamburger is a button. Use <button> with an accessible name such as Menu, add aria-expanded that switches between true and false, and point aria-controls at the menu it opens. Screen readers then announce Menu, collapsed or expanded.
Animating the bars
The three bars are spans. When aria-expanded becomes true, CSS rotates the outer bars with transform and fades the middle one. Styling from the ARIA attribute keeps the visual state and the announced state in sync automatically.
Say Menu
Many people do not recognise the three-line icon. Adding the visible word Menu, as in the labelled demo, makes the control clearer for everyone and doubles as the accessible name.
Escape and focus
When the menu opens, move focus to the first link. When Escape is pressed, close it and return focus to the button, so keyboard users never get lost behind an overlay.
Frequently asked questions
Do hamburger menus need JavaScript?
Toggling aria-expanded needs a few lines of JavaScript. The animation itself is pure CSS.
Should desktop sites use a hamburger?
Usually not. Show the links directly when there is room and keep the hamburger for small screens.
How do I respect reduced motion?
Wrap transitions in a prefers-reduced-motion check, as every demo here does.