Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I use CSS to create a smooth sliding sidebar menu?
Asked on Jan 28, 2026
Answer
To create a smooth sliding sidebar menu using CSS, you can utilize CSS transitions and positioning. This involves setting up the sidebar with an initial hidden position and then using a class toggle to slide it into view.
<!-- BEGIN COPY / PASTE -->
<style>
.sidebar {
width: 250px;
height: 100vh;
background-color: #333;
position: fixed;
top: 0;
left: -250px;
transition: left 0.3s ease;
}
.sidebar.open {
left: 0;
}
.toggle-btn {
position: absolute;
top: 20px;
left: 20px;
cursor: pointer;
}
</style>
<div class="sidebar" id="sidebar">
<p>Sidebar content here</p>
</div>
<button class="toggle-btn" onclick="toggleSidebar()">Toggle Sidebar</button>
<script>
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('open');
}
</script>
<!-- END COPY / PASTE -->Additional Comment:
- The sidebar is initially positioned off-screen using "left: -250px".
- Applying the "open" class changes its position to "left: 0", making it visible.
- The transition property ensures the sliding effect is smooth over 0.3 seconds.
- The button toggles the "open" class to slide the sidebar in and out.
Recommended Links:
