Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create an animated, closable side navigation menu with CSS?
To create an animated, closable side navigation menu, we need to combine CSS transitions with JavaScript event handling. The menu slides in from the left when opened and smoothly slides out when closed using CSS width transitions.
Syntax
.sideNav {
width: 0;
transition: width 0.5s;
position: fixed;
}
/* JavaScript to toggle width */
element.style.width = "300px"; /* Open */
element.style.width = "0"; /* Close */
Basic Structure
The side navigation consists of three main components −
- Navigation container − A fixed-positioned element with CSS transitions
- Open button − Triggers the menu to slide in
- Close button − Triggers the menu to slide out
CSS Styling
The key CSS properties for the animated side navigation −
.sideNav {
height: 100vh; /* Full viewport height */
width: 0; /* Initially hidden */
position: fixed; /* Fixed positioning */
z-index: 1; /* Above other content */
top: 0;
left: 0;
background-color: #2eadc3;
overflow-x: hidden; /* Hide horizontal scroll */
padding-top: 60px;
transition: 0.5s; /* Smooth animation */
}
Example: Complete Animated Side Navigation
The following example creates a fully functional animated side navigation menu −
<!DOCTYPE html>
<html>
<head>
<style>
.sideNav {
height: 100vh;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #2eadc3;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sideNav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #000;
font-family: Arial, sans-serif;
display: block;
transition: 0.3s;
}
.sideNav a:hover {
color: #f1f1f1;
background-color: rgba(0,0,0,0.1);
}
.sideNav .closeBtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
cursor: pointer;
}
.openSideNav {
padding: 15px 25px;
background-color: #1b4591;
color: white;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 20px;
}
.openSideNav:hover {
background-color: #0f2d5c;
}
</style>
</head>
<body>
<nav class="sideNav">
<a href="#" class="closeBtn">×</a>
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<a href="#">Login</a>
</nav>
<button class="openSideNav">? Open Menu</button>
<div style="margin-left: 20px; padding: 20px;">
<h2>Main Content</h2>
<p>Click the menu button to open the side navigation.</p>
</div>
<script>
let openBtn = document.querySelector(".openSideNav");
let closeBtn = document.querySelector(".closeBtn");
openBtn.addEventListener("click", () => {
showNav();
});
closeBtn.addEventListener("click", () => {
hideNav();
});
function showNav() {
document.querySelector(".sideNav").style.width = "300px";
}
function hideNav() {
document.querySelector(".sideNav").style.width = "0";
}
</script>
</body>
</html>
A page with a blue "? Open Menu" button appears. Clicking it slides in a cyan-colored side navigation menu from the left with navigation links (Home, About Us, Services, Contact, Login). The menu includes an × close button in the top-right corner that slides the menu back out when clicked. All animations are smooth with CSS transitions.
Key Features
-
CSS Transitions − The
transition: 0.5sproperty creates smooth sliding animation - Fixed Positioning − Keeps the menu in place while scrolling
- JavaScript Toggle − Controls the width property to show/hide the menu
- Hover Effects − Navigation links change color on mouse hover
Conclusion
An animated side navigation menu combines CSS transitions with JavaScript event handling to create a smooth user experience. The key is using CSS transition on the width property and JavaScript to toggle between 0 and the desired width.
Updated on: 2026-03-15T14:15:34+05:30
513 Views
Advertisements