Hello readers, today in this blog you'll learn how to create a responsive sidebar menu design using HTML, CSS, and Javascript. In our previous blog, we saw how to create a responsive navbar design using HTML, CSS, and Javascript. Now it's time to create a responsive sidebar menu design. I've also shared many projects related to Javascript. So don't forget to check here.
In this design [Responsive Sidebar Menu] we have a sidebar on the left side of the page. This sidebar has a dark blue background color. It has a menu toggle button which I shared before when you click on the button a class will be added to the sidebar and it will increase its width with a smooth transition.
Preview is available here.
Sidebar Menu Design [Source Code]
HTML Code
<!-- ---------------- Created By InCoder ---------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Sidebar Menu Design - InCoder</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<nav class="sidebar">
<div class="toggler">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="header">
<div class="brand"><i class="fa-brands fa-linkedin-in"></i>
<p>Coder</p>
</div>
</div>
<div class="body">
<ul>
<a href="#">
<div class="menuIcon"><i class="fas fa-home"></i></div>
<li>Home</li>
</a>
<a href="#">
<div class="menuIcon"><i class="fa-solid fa-user-group"></i></div>
<li>Friends</li>
</a>
<a href="#">
<div class="menuIcon"><i class="fa-solid fa-cart-shopping"></i></div>
<li>Shopping</li>
</a>
<a href="#">
<div class="menuIcon"><i class="fa-solid fa-bell"></i></div>
<li>Notifications</li>
</a>
<a href="#">
<div class="menuIcon"><i class="fa-solid fa-gear"></i></div>
<li>Settings</li>
</a>
</ul>
</div>
</nav>
</body>
</html>
CSS Code
/* ---------------- Created By InCoder ---------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
.sidebar {
width: 4rem;
width: 4rem;
height: 100vh;
position: fixed;
transition: width 0.3s;
background-color: rgba(17, 24, 39, 1);
}
.sidebar.open {
width: 13rem;
}
.toggler {
top: 1rem;
right: -3rem;
display: flex;
width: 2.5rem;
height: 2.5rem;
cursor: pointer;
position: absolute;
transition: all 0.3s;
align-items: center;
border-radius: 0.5rem;
flex-direction: column;
justify-content: center;
background-color: rgba(17, 24, 39, 1);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.toggler .line {
width: 60%;
height: 3px;
border-radius: 5px;
position: absolute;
transition: all 0.3s;
background-color: #fff;
}
.toggler .line:first-child {
width: 40%;
transform: translateX(-4px) translateY(-8px);
}
.toggler .line:last-child {
width: 50%;
margin-bottom: 0px;
transform: translateX(-2px) translateY(8px);
}
.toggler.open .line:first-child {
width: 60%;
transform: translateX(0px) translateY(0px) rotate(45deg);
}
.toggler.open .line:last-child {
width: 60%;
transform: translateX(0px) translateY(0px) rotate(-45deg);
}
.toggler.open .line:nth-child(2) {
opacity: 0;
transform: translateX(10px);
}
.header {
display: flex;
align-items: center;
transition: all 0.3s;
justify-content: center;
color: rgba(255, 255, 255, 1);
}
.sidebar.open .header {
margin-left: 0.6rem;
justify-content: flex-start;
}
.header i {
cursor: pointer;
font-size: 1.5rem;
margin-top: 0.8rem;
padding: 0.8rem 0.9rem;
border-radius: 0.5rem;
}
.header i:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.header .brand {
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.header .brand p {
display: none;
cursor: pointer;
margin-top: 12px;
font-weight: 600;
font-size: 1.3rem;
margin-left: -12px;
}
.sidebar.open .header .brand p {
display: block;
}
.sidebar.open .header i:hover {
background-color: transparent;
}
.body ul {
display: flex;
margin-top: 1rem;
align-items: center;
flex-direction: column;
justify-content: center;
}
.body ul a li {
display: none;
}
.sidebar.open .body ul a li {
display: block;
padding-left: 10px;
}
.body ul a {
width: 85%;
display: flex;
padding: 8px 0px;
align-items: center;
border-radius: 0.4rem;
justify-content: center;
color: rgba(255, 255, 255, 0.8);
}
.sidebar.open .body ul a {
padding-left: 10px;
text-decoration: none;
justify-content: flex-start !important;
}
.body ul a:hover {
color: rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 0.1);
}
Javascript Code
let sidebar = document.querySelector(".sidebar");
let toggler = document.querySelector(".toggler");
toggler.addEventListener("click", function () {
this.classList.toggle("open");
sidebar.classList.toggle("open");
});
Top comments (0)