20 CSS Hamburger Menus 07 / 20

Tailwind CSS Hamburger Menu

Utility-first build via the Tailwind CDN with a custom config (acid/sky/plum palette).

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{fontFamily:{grot:['"Space Grotesk"','sans-serif'],mono:['"DM Mono"','monospace']},colors:{ink:'#0c0d12',acid:'#d4ff3d',sky:'#5eead4',plum:'#a78bfa'}}}}</script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<div class="chm-07">
  <div class="chm-07__scene bg-ink text-white relative overflow-hidden" style="min-height:460px">
    <div class="pointer-events-none absolute inset-0" style="background:radial-gradient(40% 50% at 20% 20%,rgba(212,255,61,.16),transparent 60%),radial-gradient(40% 50% at 85% 80%,rgba(94,234,212,.14),transparent 60%)"></div>

    <button id="chm-07-btn" aria-label="Toggle menu"
      class="group absolute top-6 right-6 z-50 grid h-14 w-14 place-items-center rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl transition-all duration-500 hover:scale-105">
      <div class="relative h-4 w-7">
        <span id="chm-07-l1" class="absolute left-0 top-0 h-0.5 w-full rounded bg-white transition-all duration-500"></span>
        <span id="chm-07-l2" class="absolute left-0 top-1.5 h-0.5 w-full rounded bg-white transition-all duration-300"></span>
        <span id="chm-07-l3" class="absolute left-0 top-3 h-0.5 w-full rounded bg-white transition-all duration-500"></span>
      </div>
    </button>

    <nav id="chm-07-panel" class="absolute top-0 right-0 z-40 flex h-full w-full max-w-sm translate-x-full flex-col justify-center gap-2 border-l border-acid/20 bg-ink/90 px-8 backdrop-blur-2xl transition-transform duration-700 ease-[cubic-bezier(.16,1,.3,1)]">
      <p class="mb-6 font-mono text-xs tracking-[0.4em] text-acid">UTILITY-FIRST NAV</p>
      <a href="#" class="group flex items-baseline gap-4 border-b border-white/5 py-3 text-2xl font-semibold transition-colors hover:text-acid"><span class="font-mono text-xs text-sky">01</span>Build</a>
      <a href="#" class="group flex items-baseline gap-4 border-b border-white/5 py-3 text-2xl font-semibold transition-colors hover:text-sky"><span class="font-mono text-xs text-sky">02</span>Ship</a>
      <a href="#" class="group flex items-baseline gap-4 border-b border-white/5 py-3 text-2xl font-semibold transition-colors hover:text-plum"><span class="font-mono text-xs text-sky">03</span>Scale</a>
      <a href="#" class="group flex items-baseline gap-4 py-3 text-2xl font-semibold transition-colors hover:text-acid"><span class="font-mono text-xs text-sky">04</span>Docs</a>
    </nav>

    <div class="relative z-10 flex items-center justify-center px-6 text-center" style="min-height:460px">
      <div>
        <span class="mb-4 inline-block rounded-full border border-acid/40 px-4 py-1.5 font-mono text-xs tracking-[0.3em] text-acid">UTILITY CLASSES ONLY</span>
        <h1 class="text-5xl font-bold leading-none tracking-tight md:text-6xl" style="font-family:'Space Grotesk',sans-serif">tailwind<br><span class="text-acid">toggle</span></h1>
        <p class="mt-4 font-mono text-xs text-white/50">Flexbox · transitions · absolute positioning</p>
      </div>
    </div>
    <div class="absolute bottom-5 left-6 z-10 font-mono text-[10px] tracking-[0.3em] text-white/40">TAILWIND // 2030</div>
  </div>
</div>
.chm-07, .chm-07 *, .chm-07 *::before, .chm-07 *::after { box-sizing: border-box; }
.chm-07{font-family:'Space Grotesk',sans-serif;min-height:460px;display:grid;place-items:stretch}
.chm-07 .chm-07__scene{min-height:460px;height:100%}

@media (prefers-reduced-motion: reduce){
  .chm-07 *{transition:none !important}
}
(() => {
  const root = document.querySelector('.chm-07');
  if (!root) return;
  const btn = root.querySelector('#chm-07-btn');
  const panel = root.querySelector('#chm-07-panel');
  const l1 = root.querySelector('#chm-07-l1');
  const l2 = root.querySelector('#chm-07-l2');
  const l3 = root.querySelector('#chm-07-l3');
  let o = false;
  btn.addEventListener('click', () => {
    o = !o;
    panel.classList.toggle('translate-x-full', !o);
    l1.style.transform = o ? 'translateY(8px) rotate(45deg)' : '';
    l2.style.opacity = o ? '0' : '1';
    l2.style.width = o ? '0' : '100%';
    l3.style.transform = o ? 'translateY(-8px) rotate(-45deg)' : '';
    [l1, l3].forEach(l => l.style.background = o ? '#d4ff3d' : '#fff');
    btn.style.borderColor = o ? '#d4ff3d' : '';
  });
})();

More from 20 CSS Hamburger Menus

Minimalist / Floating Hamburger ButtonAccessible Hamburger Menu (WCAG Compliant)Full Screen Blur Overlay Hamburger MenuMobile Bottom Nav Bar with Floating HamburgerMulti-Level Dropdown Hamburger Menu (Nested Accordion)Flexbox Navbar with Right-Aligned Hamburger IconCircular Expand / Radial Ripple Mobile MenuFixed Sticky Header with Shrinking Hamburger IconNeumorphic Hamburger Menu Toggle ButtonBrutalist CSS Bordered Hamburger Menu3D Rotating Canvas Mobile Hamburger MenuPure CSS Hamburger Menu (No JavaScript)
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →