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)