Responsive Sidebar Menu with Toggle HTML CSS JavaScript
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Sidebar Toggle Menu</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
/>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<div class="logo-area">
<span class="menu-text">Menu</span>
</div>
<button class="toggle-btn" id="toggleBtn">
<i class="fas fa-bars"></i>
</button>
</div>
<ul class="menu">
<li><a href="#"><i class="fas fa-home"></i><span class="hide">Home</span></a></li>
<li><a href="#"><i class="fas fa-user"></i><span class="hide">Profile</span></a></li>
<li><a href="#"><i class="fas fa-cogs"></i><span class="hide">Settings</span></a></li>
<li><a href="#"><i class="fas fa-envelope"></i><span class="hide">Messages</span></a></li>
<li><a href="#"><i class="fas fa-sign-out-alt"></i><span class="hide">Logout</span></a></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background: #f5f8fc;
display: flex;
height: 100vh;
overflow: hidden;
color: #333;
}
/* Sidebar */
.sidebar {
width: 220px;
background: #e0e5ec;
padding: 20px 10px;
display: flex;
flex-direction: column;
transition: 0.3s;
box-shadow: 5px 0 15px rgba(0,0,0,0.05);
}
.sidebar.collapsed {
width: 70px;
}
.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding: 0 10px;
}
.logo-area {
display: flex;
align-items: center;
gap: 10px;
}
.logo-area i {
font-size: 20px;
color: #5b5b5b;
}
.menu-text {
font-weight: bold;
font-size: 18px;
color: #444;
transition: 0.3s;
}
.sidebar.collapsed .menu-text {
display: none;
}
/* Toggle Button */
.toggle-btn {
background: #d0d4de;
border: none;
padding: 8px 12px;
border-radius: 8px;
box-shadow: inset 3px 3px 6px #bebebe, inset -3px -3px 6px #ffffff;
cursor: pointer;
color: #333;
transition: 0.3s;
}
.toggle-btn:hover {
background: #c3c7d1;
}
/* Menu */
.menu {
list-style: none;
width: 100%;
padding: 0;
}
.menu li {
margin: 15px 0;
}
.menu a {
display: flex;
align-items: center;
text-decoration: none;
padding: 12px;
border-radius: 10px;
gap: 10px;
background: #e0e5ec;
color: #333;
transition: 0.3s;
box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}
.menu a:hover {
background: #dce1ec;
color: #000;
}
.hide {
display: inline-block;
transition: 0.3s;
}
.sidebar.collapsed .hide {
display: none;
}
/* Content */
.content {
flex: 1;
padding: 60px 40px;
}
JavaScript
const toggleBtn = document.getElementById("toggleBtn");
const sidebar = document.getElementById("sidebar");
toggleBtn.addEventListener("click", () => {
sidebar.classList.toggle("collapsed");
});