GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Drawer

This pattern is also known as off-canvas.

HTML

<div class="drawer">
<!-- Backdrop -->
<div class="drawer__overlay"></div>

<!-- Sidebar -->
<div class="drawer__sidebar">...</div>
</div>

CSS

.drawer {
/* Take full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;

z-index: 9999;
}

.drawer__overlay {
/* Take full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;

/* User still can see the content of main page */
background-color: rgba(0, 0, 0, 0.5);

z-index: -1;
}

.drawer__sidebar {
/* Take full height */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 200px;

/* Background */
background-color: #fff;
}
Demo
Follow me on and to get more useful contents.