HTML Code | <!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</title> |
| <link rel="stylesheet" href="style.css"> |
| |
| <link rel="stylesheet" |
| href="https://unpkg.com/boxicons@latest/css/boxicons.min.css"> |
| </head> |
| <body> |
| <div class="main"> |
| <div class="side-navbar"> |
| <ul> |
| <li><a href="#"> |
| <span class="icon"><i class='bx bxs-dashboard'></i></span> |
| <span class="text"><h2>Carpool</h2></span> |
| </a></li> |
| <li><a href="#"> |
| <span class="icon"><i class='bx bxs-home-circle' ></i></span> |
| <span class="text">Home</span> |
| </a></li> |
| <li><a href="#"> |
| <span class="icon"><i class='bx bxs-message-square-detail' ></i></span> |
| <span class="text">Message</span> |
| </a></li> |
| <li><a href="#"> |
| <span class="icon"><i class='bx bxs-message-rounded-detail' ></i></span> |
| <span class="text">Chat</span> |
| </a></li> |
| <li><a href="#"> |
| <span class="icon"><i class='bx bxs-user' ></i></span> |
| <span class="text">Profile</span> |
| </a></li> |
| <li><a href="#"> |
| <span class="icon"><i class='bx bxs-cloud-upload' ></i></span> |
| <span class="text">Upload</span> |
| </a></li> |
| <li><a href="#"> |
| <span class="icon"><i class='bx bxs-cog' ></i></span> |
| <span class="text">Setting</span> |
| </a></li> |
| <li><a href="#"> |
| <span class="icon"><i class='bx bxs-log-out' ></i></span> |
| <span class="text">Log-Out</span> |
| </a></li> |
| </ul> |
| </div> |
| <div class="content"> |
| <div class="top-navbar"> |
| <div class="bx bx-menu" id="menu-icon"></div> |
| <div class="profile"> |
| <img src="img/profile.jpg" alt=""> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script src="main.js"></script> |
| |
| </body> |
| </html> |
CSS Code
| |
| @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| list-style: none; |
| text-decoration: none; |
| font-family: "Poppins", sans-serif; |
| } |
| .main { |
| width: 100%; |
| background-color: #fff; |
| } |
| .side-navbar { |
| position: fixed; |
| height: 100vh; |
| width: 260px; |
| background: #460044; |
| overflow: hidden; |
| transition: 0.5s ease; |
| } |
| .side-navbar ul { |
| top: 0; |
| left: 0; |
| width: 100%; |
| } |
| .side-navbar ul li { |
| width: 100%; |
| } |
| .side-navbar ul li:hover { |
| background: #8b0084; |
| } |
| .side-navbar ul li:first-child { |
| margin-bottom: 1rem; |
| background: none; |
| } |
| .side-navbar ul li a { |
| display: block; |
| width: 100%; |
| display: flex; |
| color: #fff; |
| } |
| .side-navbar ul li a .icon { |
| min-width: 60px; |
| display: block; |
| font-size: 25px; |
| line-height: 60px; |
| height: 60px; |
| text-align: center; |
| } |
| .side-navbar ul li a .text { |
| display: block; |
| padding: 0 10px; |
| line-height: 60px; |
| height: 60px; |
| white-space: nowrap; |
| } |
| .content { |
| position: absolute; |
| width: calc(100% - 260px); |
| left: 260px; |
| min-height: 100vh; |
| transition: 0.5s ease; |
| } |
| .top-navbar { |
| width: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 7px 20px; |
| box-shadow: 0 2px 4px rgb(0 0 0 / 10%); |
| } |
| .profile img { |
| width: 44px; |
| height: 44px; |
| object-fit: contain; |
| object-position: center; |
| border-radius: 50%; |
| cursor: pointer; |
| } |
| #menu-icon { |
| font-size: 34px; |
| cursor: pointer; |
| } |
| .content.active { |
| width: calc(100% - 60px); |
| left: 60px; |
| } |
| .side-navbar.active { |
| width: 60px; |
| } |
| @media (max-width: 768px) { |
| .content { |
| width: 100%; |
| left: 0; |
| } |
| .side-navbar { |
| width: 60px; |
| left: -60px; |
| } |
| .content.active { |
| width: calc(100% - 60px); |
| left: 60px; |
| } |
| .side-navbar.active { |
| left: 0; |
| } |
| } |
JavaScript Code
| |
| let menu = document.querySelector('#menu-icon'); |
| let sidenavbar = document.querySelector('.side-navbar'); |
| let content = document.querySelector('.content'); |
| |
| menu.onclick = () => { |
| sidenavbar.classList.toggle('active'); |
| content.classList.toggle('active'); |
| } |
Download Files
Comments