Patterns Easy
Drawer Slide Effect
Slide-in/out drawer panel from any edge — smooth gesture-friendly panel transition for menus and sheets.
Open in Lab
MCP
css vanilla-js
Targets: JS HTML
Code
* {
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">×</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">×</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>Drawer Slide Effect
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-motionrespected