CSS Animation Example: Reveal Drawer

The "Reveal Drawer" (also known as an off-canvas menu) is an essential pattern for mobile layouts, swiping in from the side to reveal navigation links.

About Services Clients

Click the button to slide the drawer open and push this content.

This layout positions a sidebar off-screen by setting a negative left value equal to its width (e.g., left: -250px). When triggered, a transition animates transform: translateX(250px) to smoothly slide the menu into view. For a more interactive feel, we can simultaneously apply a margin or transform to the main content area, making it look as though the drawer is physically "pushing" the webpage over.

Here is the code to create the Reveal Drawer animation.

<!doctype html>
<title>Example</title>
<style>
body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
    overflow-x: hidden;
}

/* The side navigation menu */
.drawer {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: -250px; /* Hide off-screen by default */
    background-color: #333;
    overflow-x: hidden;
    padding-top: 60px;
    transition: transform 0.3s ease;
}

.drawer a {
    padding: 15px 25px;
    text-decoration: none;
    font-size: 1.2rem;
    color: #818181;
    display: block;
    transition: color 0.2s;
}

.drawer a:hover {
    color: #f1f1f1;
}

/* Open State */
.drawer.open {
    transform: translateX(250px);
}

/* Main Content Area */
#main {
    transition: margin-left 0.3s ease;
    padding: 20px;
}

/* Push Main Content State */
#main.pushed {
    margin-left: 250px;
}

@media (prefers-reduced-motion: reduce) {
    .drawer, #main {
        transition: none; /* Drawer instantly snaps open */
    }
}
</style>

<div id="demoDrawer" class="drawer">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>

<div id="main">
    <button onclick="toggleDrawer()" style="font-size: 1.2rem; cursor: pointer; padding: 10px;">â˜° Open Menu</button>
    <h2>Main Content</h2>
    <p>Click the button to open the side drawer menu.</p>
</div>

View Output

Accessibility Considerations

Large swaths of the screen moving horizontally can trigger motion sickness for some users. Respecting prefers-reduced-motion is crucial here. prefers-reduced-motion is a CSS media feature used to detect if a user has enabled a setting on their operating system or browser to minimize the amount of non-essential animation or motion. By removing the transition, the layout snaps instantly into its final position without the sliding movement.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .drawer, #main {
        /* Disables the sliding animation, so the menu jumps into view */
        transition: none; 
    }
}