20 CSS Hamburger Menus 19 / 20

Brutalist CSS Bordered Hamburger Menu

Indie-hacker brutalism: hot-yellow ground, hard border: 4px solid #000, rigid offset box-shadow that collapses on press, Archivo Black, zero radius.

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

The code

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

    <button class="chm-19__burger" aria-label="Toggle menu"><span class="chm-19__b"><i></i><i></i><i></i></span></button>

    <div class="chm-19__scrim"></div>
    <nav class="chm-19__panel">
      <span class="chm-19__h">// MENU.EXE</span>
      <a href="#">Index</a>
      <a href="#">Work</a>
      <a href="#">Info</a>
      <a href="#">Mail</a>
    </nav>

    <div class="chm-19__stage">
      <div class="chm-19__hero">
        <h1><span class="chm-19__fill">RAW</span><br><span class="chm-19__out">EDGES</span></h1>
        <p>HARD BORDERS · OFFSET SHADOWS · NO RADIUS</p>
      </div>
    </div>
    <div class="chm-19__tag">BRUTALIST // 2030</div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;700&display=swap');
.chm-19, .chm-19 *, .chm-19 *::before, .chm-19 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.chm-19{
  --paper:#f7f200;--ink:#000;--white:#fff;--pink:#ff4ec7;--blue:#2d5bff;
  min-height:460px;display:grid;place-items:stretch;
  font-family:'Space Grotesk',sans-serif;background:var(--paper);color:var(--ink);
  position:relative;
}
.chm-19__scene{position:relative;width:100%;min-height:460px;height:100%;overflow:hidden}
.chm-19__bg{position:absolute;inset:0;background-image:linear-gradient(var(--ink) 2px,transparent 2px),linear-gradient(90deg,var(--ink) 2px,transparent 2px);background-size:70px 70px;opacity:.06}
.chm-19__stage{position:relative;z-index:2;min-height:460px;display:flex;flex-direction:column;justify-content:center;padding:0 7%}
.chm-19__hero h1{font-family:'Archivo Black',sans-serif;font-size:clamp(2rem,8vw,5.5rem);line-height:.86;text-transform:uppercase;letter-spacing:-.02em;
  -webkit-text-stroke:2px var(--ink)}
.chm-19__fill{color:var(--ink)}
.chm-19__out{color:var(--paper);-webkit-text-stroke:3px var(--ink)}
.chm-19__hero p{font-family:'DM Mono',monospace;margin-top:18px;font-size:11px;letter-spacing:.05em;background:var(--ink);color:var(--paper);display:inline-block;padding:6px 12px}
.chm-19__burger{position:absolute;top:24px;right:24px;z-index:60;width:64px;height:64px;background:var(--white);border:4px solid var(--ink);cursor:pointer;display:grid;place-items:center;
  box-shadow:7px 7px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .2s}
.chm-19__burger:hover{background:var(--pink)}
.chm-19__burger:active{transform:translate(7px,7px);box-shadow:0 0 0 var(--ink)}
.chm-19__b{width:30px;height:20px;position:relative;display:inline-block}
.chm-19__b i{position:absolute;left:0;height:4px;width:100%;background:var(--ink);transition:transform .4s cubic-bezier(.7,0,.2,1),opacity .25s}
.chm-19__b i:nth-child(1){top:0}.chm-19__b i:nth-child(2){top:8px}.chm-19__b i:nth-child(3){top:16px}
.chm-19.is-open .chm-19__burger{background:var(--blue)}
.chm-19.is-open .chm-19__b i{background:var(--white)}
.chm-19.is-open .chm-19__b i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.chm-19.is-open .chm-19__b i:nth-child(2){opacity:0}
.chm-19.is-open .chm-19__b i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.chm-19__panel{position:absolute;top:0;right:0;height:100%;width:min(340px,90%);z-index:50;background:var(--white);border-left:5px solid var(--ink);
  transform:translateX(100%);transition:transform .4s cubic-bezier(.7,0,.2,1);padding:96px 24px 24px}
.chm-19.is-open .chm-19__panel{transform:translateX(0)}
.chm-19__h{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.2em;background:var(--ink);color:var(--paper);padding:5px 10px;display:inline-block;margin-bottom:22px}
.chm-19__panel a{display:block;font-family:'Archivo Black',sans-serif;font-size:1.3rem;text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:4px solid var(--ink);padding:14px 18px;margin-bottom:14px;background:var(--white);box-shadow:6px 6px 0 var(--ink);
  transition:transform .12s,box-shadow .12s,background .2s,color .2s}
.chm-19__panel a:nth-child(2):hover{background:var(--pink)}
.chm-19__panel a:nth-child(3):hover{background:var(--blue);color:var(--white)}
.chm-19__panel a:nth-child(4):hover{background:var(--paper)}
.chm-19__panel a:nth-child(5):hover{background:var(--pink)}
.chm-19__panel a:hover{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.chm-19__scrim{position:absolute;inset:0;z-index:45;background:rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:.3s}
.chm-19.is-open .chm-19__scrim{opacity:1;pointer-events:auto}
.chm-19__tag{position:absolute;bottom:24px;left:7%;z-index:5;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.15em;background:var(--ink);color:var(--paper);padding:4px 8px}

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

More from 20 CSS Hamburger Menus

Fixed Sticky Header with Shrinking Hamburger IconNeumorphic Hamburger Menu Toggle Button3D Rotating Canvas Mobile Hamburger MenuPure 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 Button
View the full collection →

Search CodeFronts

Loading…

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