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
How to create a collapsible sidebar menu with CSS and JavaScript?
A collapsible sidebar menu is a navigation component that can be toggled to show or hide menu items. When collapsed, it saves screen space while maintaining easy access to navigation links. This tutorial demonstrates how to create a responsive collapsible sidebar using HTML, CSS, and JavaScript.
The sidebar starts hidden and slides in from the left when activated. When opened, it pushes the main content to the right, creating a smooth transition effect. This pattern is commonly used in responsive web design to optimize navigation on both desktop and mobile devices.
HTML Structure
First, create the basic HTML structure with a sidebar container and main content area:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeSidebar()">×</a>
<a href="#">Tutorials</a>
<a href="#">About Us</a>
<a href="#">Career</a>
<a href="#">Contact Us</a>
</div>
<div id="content">
<button class="openbtn" onclick="openSidebar()">?</button>
<h2>Collapsible Sidebar Menu</h2>
<p>Click on the menu icon to open the sidebar. It will slide in and push this content to the right.</p>
</div>
</body>
</html>
CSS Styling
Add CSS to style the sidebar and create smooth transitions:
body {
font-family: "Lato", sans-serif;
margin: 0;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
border-radius: 3px;
}
.openbtn:hover {
background-color: #444;
}
#content {
transition: margin-left 0.5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
JavaScript Functions
Create JavaScript functions to handle the open and close operations:
function openSidebar() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("content").style.marginLeft = "250px";
}
function closeSidebar() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("content").style.marginLeft = "0";
}
Complete Working Example
Here's the complete implementation combining HTML, CSS, and JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
margin: 0;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
border-radius: 3px;
}
.openbtn:hover {
background-color: #444;
}
#content {
transition: margin-left 0.5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeSidebar()">×</a>
<a href="#">Tutorials</a>
<a href="#">About Us</a>
<a href="#">Career</a>
<a href="#">Contact Us</a>
</div>
<div id="content">
<button class="openbtn" onclick="openSidebar()">?</button>
<h2>Collapsible Sidebar Menu</h2>
<p>
Click on the menu icon to open the sidebar. It will slide in from the left and push this content to the right.
</p>
<p>
The sidebar menu provides easy navigation while maintaining a clean layout. When not needed, it collapses to save screen space.
</p>
</div>
<script>
function openSidebar() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("content").style.marginLeft = "250px";
}
function closeSidebar() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("content").style.marginLeft = "0";
}
</script>
</body>
</html>
How It Works
The sidebar starts with width: 0, making it invisible. When openSidebar() is called, the width changes to 250px, and the main content's left margin also shifts to 250px. The CSS transition property creates smooth animations. The close button reverses this process, returning both values to 0.
Key Features
The implementation includes responsive design with media queries for smaller screens, hover effects on menu items, smooth CSS transitions for professional appearance, and a fixed position sidebar that overlays the content without affecting the document flow.
Conclusion
This collapsible sidebar menu provides an elegant navigation solution that works across devices. The combination of CSS transitions and JavaScript manipulation creates a smooth user experience while maintaining clean, organized code structure.
8K+ Views
