Every site needs one. Here's the animated icon plus the accessible toggle logic.
The icon — three spans to an X
.burger { display: grid; gap: 5px; background: none; border: 0; cursor: pointer; }
.burger span { width: 26px; height: 3px; background: #fff; border-radius: 2px; transition: 0.3s; }
.burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }The accessible toggle
<button class="burger" aria-label="Menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<script>
burger.addEventListener("click", () => {
const open = burger.classList.toggle("open");
nav.classList.toggle("nav-open", open);
burger.setAttribute("aria-expanded", open);
});
</script>.nav-links { position: fixed; inset: 64px 0 auto 0; translate: 0 -120%;
transition: translate .3s ease; }
.nav-links.nav-open { translate: 0 0; }The checkbox-hack CSS-only version exists, but the 6-line JS version wins: it can set aria-expanded, which screen readers need. This site's mobile nav works exactly this way — resize and try it.