Drawer Slide Effect

Код

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #0f172a;
  color: #e2e8f0;
  font-family: system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.open-btn {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background: #3b82f6;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.open-btn:active {
  transform: scale(0.97);
}

.open-btn--right {
  background: #8b5cf6;
}

/* Backdrop */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 100;
}

.drawer-backdrop.open {
  opacity: 1;
}

/* Drawer panel */
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: #1e293b;
  z-index: 101;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.drawer--left {
  left: 0;
  transform: translateX(-100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer--right {
  right: 0;
  transform: translateX(100%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer-backdrop.open .drawer--left {
  transform: translateX(0);
}

.drawer-backdrop.open .drawer--right {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.drawer-close {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
}

.drawer-close:hover {
  color: #fff;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}

.drawer-link {
  padding: 0.75rem 1.25rem;
  color: #cbd5e1;
  text-decoration: none;
  transition: background 0.15s;
}

.drawer-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.drawer-body {
  padding: 1rem 1.25rem;
  color: #94a3b8;
}

@media (prefers-reduced-motion: reduce) {
  .drawer,
  .drawer-backdrop {
    transition-duration: 0.01ms;
  }
}

function setupDrawer(openId, closeId, backdropId) {
  const openBtn = document.getElementById(openId);
  const closeBtn = document.getElementById(closeId);
  const backdrop = document.getElementById(backdropId);

  function open() {
    backdrop.hidden = false;
    requestAnimationFrame(() => backdrop.classList.add("open"));
  }

  function close() {
    backdrop.classList.remove("open");
    backdrop.addEventListener("transitionend", function handler() {
      backdrop.hidden = true;
      backdrop.removeEventListener("transitionend", handler);
    });
  }

  openBtn.addEventListener("click", open);
  closeBtn.addEventListener("click", close);
  backdrop.addEventListener("click", (e) => {
    if (e.target === backdrop) close();
  });
}

setupDrawer("open-left", "close-left", "backdrop-left");
setupDrawer("open-right", "close-right", "backdrop-right");

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Drawer Slide Effect</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <button type="button" class="open-btn" id="open-left">Open Left Drawer</button>
  <button type="button" class="open-btn open-btn--right" id="open-right">Open Right Drawer</button>

  <!-- Left Drawer -->
  <div class="drawer-backdrop" id="backdrop-left" hidden>
    <aside class="drawer drawer--left" id="drawer-left">
      <div class="drawer-header">
        <h3>Menu</h3>
        <button type="button" class="drawer-close" id="close-left">&times;</button>
      </div>
      <nav class="drawer-nav">
        <a href="#" class="drawer-link">Home</a>
        <a href="#" class="drawer-link">About</a>
        <a href="#" class="drawer-link">Projects</a>
        <a href="#" class="drawer-link">Contact</a>
      </nav>
    </aside>
  </div>

  <!-- Right Drawer -->
  <div class="drawer-backdrop" id="backdrop-right" hidden>
    <aside class="drawer drawer--right" id="drawer-right">
      <div class="drawer-header">
        <h3>Filters</h3>
        <button type="button" class="drawer-close" id="close-right">&times;</button>
      </div>
      <div class="drawer-body">
        <p>Slide-in panel from the right edge.</p>
      </div>
    </aside>
  </div>

  <script src="script.js"></script>
</body>
</html>

Slide-in drawer panel from the left or right edge with backdrop overlay. Reference patterns from bottom-sheet, sheet-drawer, and hamburger-menu.

Features

CSS transform: translateX() slide with smooth easing
Backdrop overlay with fade
Click outside or close button to dismiss
prefers-reduced-motion respected