CSS Animation Reveal Drawer Example

<!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>