20 CSS Hamburger Menus 18 / 20

Neumorphic Hamburger Menu Toggle Button

Soft-UI on the classic #e0e5ec surface — dual light/dark box-shadow for the raised state flipping to inset (sunken) on toggle, with an extruded menu card.

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

The code

<div class="chm-18">
  <div class="chm-18__scene">
    <div class="chm-18__stage">
      <div class="chm-18__intro">
        <h1>Soft UI toggle.</h1>
        <p>raised → sunken box-shadow states</p>
      </div>
      <button class="chm-18__neu" aria-label="Toggle menu"><span class="chm-18__b"><i></i><i></i><i></i></span></button>
      <div class="chm-18__card">
        <a href="#"><span class="chm-18__ico">⌂</span>Dashboard</a>
        <a href="#"><span class="chm-18__ico">✦</span>Discover</a>
        <a href="#"><span class="chm-18__ico">♥</span>Favorites</a>
        <a href="#"><span class="chm-18__ico">⚙</span>Settings</a>
      </div>
    </div>
    <div class="chm-18__tag">NEUMORPHIC // 2030</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap');
.chm-18, .chm-18 *, .chm-18 *::before, .chm-18 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-18{
  --bg:#e0e5ec;--text:#5a6474;--accent:#6d7cff;--light:#ffffff;--dark:#a3b1c6;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Quicksand',sans-serif;background:var(--bg);color:var(--text);
  position:relative;
}
.chm-18__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-18__stage{min-height:460px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;padding:24px;text-align:center}
.chm-18__intro h1{font-size:clamp(1.6rem,5vw,2.6rem);font-weight:700;color:#4a5468;letter-spacing:-.01em}
.chm-18__intro p{font-family:'Spline Sans Mono',monospace;margin-top:10px;font-size:11px;letter-spacing:.1em;color:#8a94a6}
.chm-18__neu{width:84px;height:84px;border-radius:26px;cursor:pointer;border:none;background:var(--bg);display:grid;place-items:center;
  box-shadow:10px 10px 22px var(--dark), -10px -10px 22px var(--light);
  transition:box-shadow .4s ease}
.chm-18__neu:hover{box-shadow:8px 8px 18px var(--dark), -8px -8px 18px var(--light)}
.chm-18.is-open .chm-18__neu{box-shadow:inset 8px 8px 16px var(--dark), inset -8px -8px 16px var(--light)}
.chm-18__b{width:34px;height:22px;position:relative;display:inline-block}
.chm-18__b i{position:absolute;left:0;height:4px;width:100%;background:var(--accent);border-radius:4px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-18__b i:nth-child(1){top:0}.chm-18__b i:nth-child(2){top:9px}.chm-18__b i:nth-child(3){top:18px}
.chm-18.is-open .chm-18__b i:nth-child(1){transform:translateY(9px) rotate(45deg)}
.chm-18.is-open .chm-18__b i:nth-child(2){opacity:0}
.chm-18.is-open .chm-18__b i:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.chm-18__card{width:min(320px,86%);border-radius:30px;background:var(--bg);padding:16px;
  box-shadow:12px 12px 28px var(--dark), -12px -12px 28px var(--light);
  display:grid;gap:6px;
  max-height:0;opacity:0;transform:translateY(-12px);overflow:hidden;pointer-events:none;
  transition:max-height .5s ease,opacity .4s,transform .5s,padding .4s}
.chm-18.is-open .chm-18__card{max-height:380px;opacity:1;transform:none;pointer-events:auto}
.chm-18__card a{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:18px;text-decoration:none;color:var(--text);font-weight:600;font-size:.95rem;
  transition:box-shadow .3s,color .3s}
.chm-18__card a:hover{color:var(--accent);box-shadow:inset 5px 5px 10px var(--dark), inset -5px -5px 10px var(--light)}
.chm-18__ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--bg);color:var(--accent);font-size:16px;
  box-shadow:5px 5px 10px var(--dark), -5px -5px 10px var(--light)}
.chm-18__tag{position:absolute;bottom:18px;right:24px;font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.2em;color:#9aa4b6}

@media (prefers-reduced-motion: reduce){
  .chm-18__neu,.chm-18__b i,.chm-18__card,.chm-18__card a{transition:none !important}
}
(() => {
  const root = document.querySelector('.chm-18');
  if (!root) return;
  const btn = root.querySelector('.chm-18__neu');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
})();

More from 20 CSS Hamburger Menus

Tailwind CSS Hamburger MenuAccessible 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 IconBrutalist CSS Bordered Hamburger Menu3D Rotating Canvas Mobile Hamburger MenuPure CSS Hamburger Menu (No JavaScript)Bootstrap 5 Responsive Navbar with Hamburger
View the full collection →

Search CodeFronts

Loading…

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