20 CSS Hamburger Menus 14 / 20

Multi-Level Dropdown Hamburger Menu (Nested Accordion)

E-commerce flyout using native <details> accordions nested three levels deep (Shop → Men's → Shoes), animated chevrons, contained hierarchy.

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

The code

<div class="chm-14">
  <div class="chm-14__scene">
    <div class="chm-14__bg"></div>

    <button class="chm-14__trg" aria-label="Toggle nested menu"><span class="chm-14__b"><i></i><i></i><i></i></span></button>

    <div class="chm-14__scrim"></div>
    <nav class="chm-14__flyout">
      <div class="chm-14__lbl">// Shop by category</div>
      <div class="chm-14__acc">
        <details open>
          <summary>Shop <span class="chm-14__chev"></span></summary>
          <div class="chm-14__sub">
            <details>
              <summary>Men's <span class="chm-14__chev"></span></summary>
              <div class="chm-14__leaf"><a href="#">Shoes</a><a href="#">Jackets</a><a href="#">Accessories</a></div>
            </details>
            <details>
              <summary>Women's <span class="chm-14__chev"></span></summary>
              <div class="chm-14__leaf"><a href="#">Boots</a><a href="#">Knitwear</a><a href="#">Bags</a></div>
            </details>
            <a href="#">View all →</a>
          </div>
        </details>
        <details>
          <summary>Collections <span class="chm-14__chev"></span></summary>
          <div class="chm-14__sub"><a href="#">New arrivals</a><a href="#">Archive sale</a><a href="#">Limited drops</a></div>
        </details>
        <details>
          <summary>Journal <span class="chm-14__chev"></span></summary>
          <div class="chm-14__sub"><a href="#">Stories</a><a href="#">Lookbook</a></div>
        </details>
      </div>
    </nav>

    <div class="chm-14__stage">
      <div class="chm-14__hero">
        <h1>Tap. <em>Expand.</em><br>Go deeper.</h1>
        <p>Nested accordion · Shop → Men's → Shoes</p>
      </div>
    </div>
    <div class="chm-14__tag">NESTED_ACCORDION // 2030</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500&display=swap');
.chm-14, .chm-14 *, .chm-14 *::before, .chm-14 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-14{
  --bg:#faf7f2;--panel:#ffffff;--ink:#1c1a17;--brand:#c0392b;--brand2:#d98324;--line:#ece7dd;--muted:#8a8378;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Epilogue',sans-serif;background:var(--bg);color:var(--ink);
  position:relative;
}
.chm-14__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-14__bg{position:absolute;inset:0;background:radial-gradient(50% 40% at 85% 10%,rgba(217,131,36,.1),transparent 60%)}
.chm-14__stage{position:relative;z-index:2;min-height:460px;display:flex;align-items:center;padding:0 6%}
.chm-14__hero h1{font-size:clamp(2rem,7vw,4.4rem);font-weight:800;letter-spacing:-.03em;line-height:.95}
.chm-14__hero h1 em{font-style:normal;color:var(--brand)}
.chm-14__hero p{font-family:'Spline Sans Mono',monospace;margin-top:14px;font-size:11px;letter-spacing:.1em;color:var(--muted)}
.chm-14__trg{position:absolute;top:22px;right:22px;z-index:60;width:54px;height:54px;border-radius:16px;cursor:pointer;display:grid;place-items:center;
  background:var(--ink);border:none;transition:transform .4s,background .4s}
.chm-14__trg:hover{transform:scale(1.05)}
.chm-14__b{width:22px;height:13px;position:relative;display:inline-block}
.chm-14__b i{position:absolute;left:0;height:2.4px;width:100%;background:#fff;border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s}
.chm-14__b i:nth-child(1){top:0}.chm-14__b i:nth-child(2){top:5.5px}.chm-14__b i:nth-child(3){top:11px}
.chm-14.is-open .chm-14__trg{background:var(--brand)}
.chm-14.is-open .chm-14__b i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.chm-14.is-open .chm-14__b i:nth-child(2){opacity:0}
.chm-14.is-open .chm-14__b i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.chm-14__flyout{position:absolute;top:0;right:0;height:100%;width:min(340px,90%);z-index:50;background:var(--panel);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .55s cubic-bezier(.16,1,.3,1);padding:84px 0 20px;overflow-y:auto}
.chm-14__flyout::-webkit-scrollbar{width:6px}.chm-14__flyout::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.chm-14.is-open .chm-14__flyout{transform:translateX(0)}
.chm-14__lbl{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--brand2);padding:0 24px 14px}
.chm-14__acc details{border-bottom:1px solid var(--line)}
.chm-14__acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;font-size:1rem;font-weight:600;transition:background .25s,color .25s}
.chm-14__acc summary::-webkit-details-marker{display:none}
.chm-14__acc summary:hover{background:#faf7f2;color:var(--brand)}
.chm-14__chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .35s;display:inline-block}
.chm-14__acc details[open]>summary .chm-14__chev{transform:rotate(-135deg)}
.chm-14__acc details[open]>summary{color:var(--brand)}
.chm-14__sub{background:#fbf9f5}
.chm-14__sub summary{padding-left:40px;font-size:.9rem;font-weight:500}
.chm-14__sub a{display:block;padding:10px 24px 10px 54px;text-decoration:none;color:var(--ink);font-size:.85rem;font-weight:400;transition:background .25s,padding-left .25s,color .25s}
.chm-14__sub a:hover{background:#f3efe7;padding-left:62px;color:var(--brand)}
.chm-14__leaf a{padding-left:68px;font-size:.8rem;color:var(--muted)}
.chm-14__leaf a::before{content:"–";margin-right:8px}
.chm-14__leaf a:hover{padding-left:76px}
.chm-14__scrim{position:absolute;inset:0;z-index:45;background:rgba(28,26,23,.3);opacity:0;pointer-events:none;transition:.4s}
.chm-14.is-open .chm-14__scrim{opacity:1;pointer-events:auto}
.chm-14__tag{position:absolute;bottom:18px;left:22px;font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--muted);z-index:5}

@media (prefers-reduced-motion: reduce){
  .chm-14__flyout,.chm-14__scrim,.chm-14__b i,.chm-14__trg,.chm-14__chev,.chm-14__acc summary,.chm-14__sub a{transition:none !important}
}
(() => {
  const root = document.querySelector('.chm-14');
  if (!root) return;
  const btn = root.querySelector('.chm-14__trg');
  const scrim = root.querySelector('.chm-14__scrim');
  btn.addEventListener('click', () => root.classList.toggle('is-open'));
  scrim.addEventListener('click', () => root.classList.remove('is-open'));
})();

More from 20 CSS Hamburger Menus

Pure CSS Hamburger Menu (No JavaScript)Bootstrap 5 Responsive Navbar with HamburgerCSS Slide Down Dropdown Hamburger MenuMinimalist 3-Line CSS Menu Icon with Hover EffectsHamburger Menu with Morphing Icon AnimationsFull-Screen Overlay Mobile NavigationSlide-out Sidebar / Off-Canvas NavigationResponsive Navbar with Mobile-Only Hamburger ToggleMinimalist / Floating Hamburger ButtonTailwind CSS Hamburger MenuAccessible Hamburger Menu (WCAG Compliant)Full Screen Blur Overlay Hamburger Menu
View the full collection →

Search CodeFronts

Loading…

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