Back to CSS Sidebar Layouts Off-canvas Drawer Pure CSS
Share 
.sb-off {
  position: relative; min-height: 480px;
  font-family: 'Helvetica Neue', system-ui, sans-serif;
  background: #050008; color: #d6f7ff;
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.sb-off::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(50% 40% at 80% 20%, rgba(0,229,255,0.18), transparent 70%),
    radial-gradient(50% 50% at 20% 90%, rgba(255,0,140,0.18), transparent 70%);
}
.sb-off::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0,229,255,0.05) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
.sb-off-cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-off:has(.sb-off-cb:focus-visible) .sb-off-burger { outline: 2px solid #00e5ff; outline-offset: 2px; }
.sb-off-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.6);
  border-bottom: 1px solid rgba(0,229,255,0.4);
  box-shadow: 0 0 24px rgba(0,229,255,0.15);
}
.sb-off-burger {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.5);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 0 0 12px rgba(0,229,255,0.2), 0 0 12px rgba(0,229,255,0.25);
  transition: background 0.15s, box-shadow 0.15s;
}
.sb-off-burger:hover { background: rgba(0,229,255,0.1); box-shadow: inset 0 0 18px rgba(0,229,255,0.3), 0 0 18px rgba(0,229,255,0.45); }
.sb-off-burger-i { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.sb-off-burger-i i { display: block; height: 2px; background: #00e5ff; box-shadow: 0 0 6px #00e5ff; }
.sb-off-title { font-family: 'Courier New', monospace; font-weight: 800; font-size: 14px; letter-spacing: 0.16em; color: #fff; }
.sb-off-title small { font-size: 9.5px; color: #ff0090; letter-spacing: 0.2em; margin-left: 4px; text-shadow: 0 0 8px rgba(255,0,144,0.7); }
.sb-off-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: 'Courier New', monospace; font-size: 10.5px; letter-spacing: 0.16em; color: #00ff9c; padding: 4px 10px; border: 1px solid rgba(0,255,156,0.4); border-radius: 12px; }
.sb-off-blink { width: 6px; height: 6px; border-radius: 50%; background: #00ff9c; box-shadow: 0 0 8px #00ff9c; animation: sb-off-blink 1.4s ease-in-out infinite; }
@keyframes sb-off-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .sb-off-blink { animation: none; } }
.sb-off-main { position: relative; z-index: 2; flex: 1; padding: 30px 32px; display: flex; flex-direction: column; gap: 18px; }
.sb-off-eye { font-family: 'Courier New', monospace; font-size: 11.5px; letter-spacing: 0.2em; color: #00e5ff; text-shadow: 0 0 8px rgba(0,229,255,0.6); }
.sb-off-main h2 {
  margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 0.92;
  color: #fff; letter-spacing: -0.03em;
  text-shadow: -2px 0 0 rgba(255,0,144,0.7), 2px 0 0 rgba(0,229,255,0.7), 0 0 30px rgba(255,255,255,0.4);
}
.sb-off-main p { margin: 0; font-size: 13.5px; color: rgba(214,247,255,0.85); line-height: 1.6; max-width: 460px; }
.sb-off-main code { font-family: 'Courier New', monospace; font-size: 12px; color: #ff0090; background: rgba(255,0,144,0.1); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(255,0,144,0.4); }
.sb-off-stat { display: flex; gap: 14px; margin-top: auto; font-family: 'Courier New', monospace; }
.sb-off-stat span { padding: 8px 14px; border: 1px solid rgba(0,229,255,0.4); border-radius: 4px; background: rgba(0,229,255,0.06); display: flex; flex-direction: column; gap: 2px; min-width: 70px; }
.sb-off-stat em { font-style: normal; font-size: 9.5px; color: #00e5ff; letter-spacing: 0.18em; }
.sb-off-stat b { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: 0.04em; }
.sb-off-backdrop {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(5,0,8,0.7);
  backdrop-filter: blur(8px) saturate(0.6);
  -webkit-backdrop-filter: blur(8px) saturate(0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.24s ease;
  z-index: 3;
}
.sb-off:has(.sb-off-cb:checked) .sb-off-backdrop { opacity: 1; pointer-events: auto; }
.sb-off-drawer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 280px;
  background: linear-gradient(180deg, rgba(8,0,16,0.95) 0%, rgba(20,0,32,0.95) 100%);
  border-right: 2px solid #00e5ff;
  box-shadow: 4px 0 32px rgba(0,229,255,0.4), inset -1px 0 0 rgba(255,0,144,0.5);
  transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 4;
  padding: 18px 14px; display: flex; flex-direction: column; gap: 12px;
}
.sb-off:has(.sb-off-cb:checked) .sb-off-drawer { transform: translateX(0); }
.sb-off-drawer header { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; border-bottom: 1px dashed rgba(0,229,255,0.4); font-family: 'Courier New', monospace; }
.sb-off-drawer header strong { font-size: 12px; color: #00e5ff; font-weight: 800; letter-spacing: 0.16em; text-shadow: 0 0 8px rgba(0,229,255,0.6); }
.sb-off-close { font-family: 'Courier New', monospace; font-size: 12px; font-weight: 800; color: #ff0090; cursor: pointer; padding: 2px 8px; user-select: none; letter-spacing: 0.1em; transition: text-shadow 0.15s; }
.sb-off-close:hover { text-shadow: 0 0 8px #ff0090; }
.sb-off-drawer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-off-drawer a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 4px;
  font-family: 'Courier New', monospace; font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.06em;
  color: #d6f7ff; text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.16s, color 0.16s, border-color 0.16s, text-shadow 0.16s;
}
.sb-off-drawer a:hover { background: rgba(0,229,255,0.08); border-left-color: #00e5ff; color: #fff; text-shadow: 0 0 8px rgba(0,229,255,0.7); }
.sb-off-drawer a[aria-current="page"] { background: rgba(255,0,144,0.12); border-left-color: #ff0090; color: #fff; text-shadow: 0 0 10px rgba(255,0,144,0.7); }
.sb-off-drawer a em { font-style: normal; font-size: 11px; color: #ff0090; font-weight: 800; opacity: 0.7; }
.sb-off-drawer a[aria-current="page"] em { color: #ffd700; opacity: 1; text-shadow: 0 0 8px #ffd700; }
.sb-off-drawer footer { margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(0,229,255,0.3); font-family: 'Courier New', monospace; font-size: 10.5px; color: rgba(0,229,255,0.7); letter-spacing: 0.16em; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .sb-off-drawer, .sb-off-backdrop { transition: none; }
}
<div class="sb-off">
  <input id="sb-off-t" class="sb-off-cb" type="checkbox" aria-label="Toggle menu" />
  <header class="sb-off-bar">
    <label class="sb-off-burger" for="sb-off-t" aria-controls="sb-off-drawer">
      <span class="sb-off-burger-i" aria-hidden="true"><i></i><i></i><i></i></span>
      <span class="sr-only">Open menu</span>
    </label>
    <span class="sb-off-title">SYS_OS<small>v2099</small></span>
    <span class="sb-off-status" aria-hidden="true">
      <span class="sb-off-blink"></span>
      ONLINE
    </span>
  </header>
  <main class="sb-off-main">
    <span class="sb-off-eye">▸ TERMINAL · USER 0x7F</span>
    <h2>Tap to<br/>jack in.</h2>
    <p>Tap the burger to slide the drawer in over the page. The backdrop blurs everything; tap it or the × to dismiss. <code>:has(:checked)</code> drives the slide.</p>
    <div class="sb-off-stat">
      <span><em>CPU</em><b>87%</b></span>
      <span><em>NET</em><b>1.2g</b></span>
      <span><em>MEM</em><b>4.7G</b></span>
    </div>
  </main>
  <label class="sb-off-backdrop" for="sb-off-t" aria-hidden="true"></label>
  <aside id="sb-off-drawer" class="sb-off-drawer" aria-label="Primary">
    <header>
      <strong>// MAIN_MENU</strong>
      <label class="sb-off-close" for="sb-off-t" aria-label="Close menu">[ × ]</label>
    </header>
    <nav aria-label="Primary">
      <ul>
        <li><a href="#!" aria-current="page" data-key="01"><em>01</em>Home</a></li>
        <li><a href="#!" data-key="02"><em>02</em>Projects</a></li>
        <li><a href="#!" data-key="03"><em>03</em>Library</a></li>
        <li><a href="#!" data-key="04"><em>04</em>Settings</a></li>
        <li><a href="#!" data-key="05"><em>05</em>Sign out</a></li>
      </ul>
    </nav>
    <footer>↩ ESC to close</footer>
  </aside>
</div>
Live preview Edit any tab — preview updates live Ready