20 CSS Hamburger Menus 10 / 20

CSS Slide Down Dropdown Hamburger Menu

Zero JavaScript.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="chm-10">
  <div class="chm-10__scene">
    <div class="chm-10__bg"></div>
    <input type="checkbox" id="chm-10-sd" class="chm-10__sd">
    <div class="chm-10__shell">
      <div class="chm-10__bar">
        <div class="chm-10__logo"><span class="chm-10__dot"></span>Verdant</div>
        <label class="chm-10__toggle" for="chm-10-sd" aria-label="Toggle dropdown"><i></i><i></i><i></i></label>
      </div>
      <div class="chm-10__drop">
        <div class="chm-10__inner">
          <a href="#">Overview <span>→</span></a>
          <a href="#">Collections <span>→</span></a>
          <a href="#">Pricing <span>→</span></a>
          <a href="#">Support <span>→</span></a>
        </div>
      </div>
      <div class="chm-10__cap">
        <h1>Slides down. Pushes nothing aside.</h1>
        <p>Pure CSS · <code>grid-template-rows: 0fr → 1fr</code></p>
      </div>
    </div>
    <div class="chm-10__tag">SLIDE_DOWN // 2030</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap');
.chm-10, .chm-10 *, .chm-10 *::before, .chm-10 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-10{
  --bg:#0f1310;--card:#161d18;--lime:#aef359;--peach:#ffb27a;--fog:#e9efe7;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Outfit',sans-serif;background:var(--bg);color:var(--fog);
  position:relative;
}
.chm-10__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-10__bg{position:absolute;inset:0;background:radial-gradient(50% 40% at 50% -5%,rgba(174,243,89,.16),transparent 60%),radial-gradient(40% 40% at 90% 100%,rgba(255,178,122,.12),transparent 55%)}
.chm-10__shell{position:relative;z-index:2;max-width:520px;margin:0 auto;padding:40px 20px;min-height:460px;display:flex;flex-direction:column;justify-content:center}
.chm-10__bar{display:flex;align-items:center;justify-content:space-between;background:rgba(22,29,24,.8);backdrop-filter:blur(14px);border:1px solid rgba(233,239,231,.08);border-radius:20px 20px 0 0;padding:16px 22px}
.chm-10__logo{font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.chm-10__dot{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime)}
.chm-10__sd{position:absolute;opacity:0;pointer-events:none}
.chm-10__toggle{width:42px;height:28px;position:relative;cursor:pointer}
.chm-10__toggle i{position:absolute;left:8px;right:8px;height:2.4px;background:var(--fog);border-radius:3px;transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .3s,background .4s}
.chm-10__toggle i:nth-child(1){top:7px}.chm-10__toggle i:nth-child(2){top:13px}.chm-10__toggle i:nth-child(3){top:19px}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__toggle i:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--lime)}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__toggle i:nth-child(2){opacity:0}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__toggle i:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--lime)}
.chm-10__drop{display:grid;grid-template-rows:0fr;background:rgba(22,29,24,.92);backdrop-filter:blur(14px);border:1px solid rgba(233,239,231,.08);border-top:none;border-radius:0 0 20px 20px;transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1)}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__drop{grid-template-rows:1fr}
.chm-10__inner{overflow:hidden}
.chm-10__drop a{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;text-decoration:none;color:var(--fog);font-size:1rem;font-weight:400;border-top:1px solid rgba(233,239,231,.06);
  opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s,background .3s,padding-left .3s,color .3s}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__drop a{opacity:1;transform:none}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__drop a:nth-child(1){transition-delay:.18s}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__drop a:nth-child(2){transition-delay:.24s}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__drop a:nth-child(3){transition-delay:.30s}
.chm-10__sd:checked ~ .chm-10__shell .chm-10__drop a:nth-child(4){transition-delay:.36s}
.chm-10__drop a:hover{background:rgba(174,243,89,.08);padding-left:30px;color:var(--lime)}
.chm-10__drop a span{font-family:'Spline Sans Mono',monospace;font-size:.7rem;color:var(--peach)}
.chm-10__cap{text-align:center;margin-top:24px}
.chm-10__cap h1{font-weight:700;font-size:clamp(1.4rem,4vw,2rem);letter-spacing:-.02em}
.chm-10__cap p{font-family:'Spline Sans Mono',monospace;margin-top:10px;font-size:10px;letter-spacing:.1em;color:rgba(233,239,231,.5)}
.chm-10__cap code{color:var(--lime)}
.chm-10__tag{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:5;font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(233,239,231,.4)}

@media (prefers-reduced-motion: reduce){
  .chm-10__toggle i,.chm-10__drop,.chm-10__drop a{transition:none !important}
}

More from 20 CSS Hamburger Menus

Responsive Navbar with Mobile-Only Hamburger ToggleMinimalist / Floating Hamburger ButtonTailwind 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 IconNeumorphic Hamburger Menu Toggle ButtonBrutalist CSS Bordered Hamburger Menu
View the full collection →

Search CodeFronts

Loading…

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