Epic Sidebar Menu Tutorial: Create the *Ultimate* Responsive Design in HTML CSS & JavaScript!
Design
CSS
Html
responsive
sidemenu
In this article, I am going to create a Sidebar Menu in HTML CSS, and JavaScript with Dark Light Mode features.
A sidebar is the combination of several navigation links aligned vertically at the left or right side of the web page. Sidebar helps users to get into a different webpages through the help of navigation links and they have open and close features.
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">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="./style.css" >
<title>Dashboard Sidebar Menu | Light-Dark Mode</title>
</head>
<body>
<nav class="sidebar close">
<header>
<div class="header-image-text">
<span class="image">
<img src="./logo.png" alt="logo devhubspot" />
</span>
<div class="text header-text">
<span class="name">Devhubspot</span>
<span class="profession">Web/App Developer</span>
</div>
</div>
<i class="bx bx-chevron-right toggle"></i>
</header>
<div class="menu-bar">
<div class="menu">
<li class="search-box">
<i class="bx bx-search icon"></i>
<input type="search" placeholder="Search..." />
</li>
<ul class="menu-links">
<li class="nav-links">
<a href="#">
<i class="bx bx-home-alt icon"></i>
<span class="text nav-text"> Dashboard</span>
</a>
</li>
<li class="nav-links">
<a href="#">
<i class="bx bx-bar-chart-alt-2 icon"></i>
<span class="text nav-text"> Charts</span>
</a>
</li>
<li class="nav-links">
<a href="#">
<i class="bx bx-user icon"></i>
<span class="text nav-text"> Users</span>
</a>
</li>
<li class="nav-links">
<a href="#">
<i class="bx bx-heart icon"></i>
<span class="text nav-text"> Likes</span>
</a>
</li>
<li class="nav-links">
<a href="#">
<i class="bx bx-pie-chart-alt icon"></i>
<span class="text nav-text"> Analytics</span>
</a>
</li>
<li class="nav-links">
<a href="#">
<i class="bx bx-wallet icon"></i>
<span class="text nav-text"> Wallets</span>
</a>
</li>
<li class="nav-links">
<a href="#">
<i class="bx bx-add-to-queue icon"></i>
<span class="text nav-text"> Add Form</span>
</a>
</li>
<li class="nav-links">
<a href="#">
<i class="bx bx-info-circle icon"></i>
<span class="text nav-text"> About</span>
</a>
</li>
<li class="nav-links">
<a href="#">
<i class="bx bx-user-plus icon"></i>
<span class="text nav-text"> Contact</span>
</a>
</li>
</ul>
</div>
<div class="bottom-content">
<li class="nav-links">
<a href="#">
<i class="bx bx-log-out icon"></i>
<span class="text nav-text"> Logout</span>
</a>
</li>
<li class="mode">
<div class="moon-sun">
<i class="bx bx-moon icon moon"></i>
<i class="bx bx-sun icon sun"></i>
</div>
<span class="mode-text text">Dark Mode</span>
<div class="toogle-switch">
<span class="switch"></span>
</div>
</li>
</div>
</div>
</nav>
<section class="home">
<div class="text">Thank you :)</div>
</section>
<script src="./script.js"></script>
</body>
</html>CSS Code
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--body-color: #e4e9f7;
--sidebar-color: #fff;
--primary-color: #667ce9;
--primary-color-light: #f6f5ff;
--toggle-color: #ddd;
--text-color: #707070;
--tran-02:all 0.2s ease;
--tran-03:all 0.3s ease;
--tran-04:all 0.4s ease;
--tran-05:all 0.5s ease;
}
body{
height: 100vh;
background: var(--body-color);
transition: var(--tran-04);
}
body.dark{
--body-color: #18191A;
--sidebar-color: #242526;
--primary-color: #3A3B3C;
--primary-color-light: #3A3B3C;
--toggle-color: #FFF;
--text-color: #CCC;
}
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
padding: 10px 14px;
width: 280px;
background: var(--sidebar-color);
transition: var(--tran-05);
z-index: 100;
}
.sidebar.close{
width: 88px;
}
.sidebar.close .text{
opacity: 0;
}
.sidebar header{
position: relative;
}
.sidebar .header-image-text img{
width: 50px;
border-radius: 6px;
}
.sidebar header .header-image-text{
display: flex;
align-items: center ;
}
.sidebar .text{
font-size: 16px;;
font-weight: 500;
color: var(--text-color);
transition: var(--tran-04);
white-space: nowrap;
opacity: 1;
}
.sidebar .image{
min-width: 60px;
display: flex;
align-items: center;
}
header .header-image-text .header-text{
display: flex;
flex-direction: column;
}
.header-text .name{
font-weight: 600;
}
.header-text .profession{
margin-top: -2px;
}
.sidebar header .toggle{
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%) rotate(180deg);
height: 25px;
width: 25px;
background: var(--primary-color);
display: flex;
align-items: center;
align-content: center;
border-radius: 50%;
font-size: 22px;
color: var(--sidebar-color);
transition: var(--tran-03);
}
.sidebar.close header .toggle{
transform: translateY(-50%)
}
body.dark .sidebar header .toggle{
color: var(--text-color);
transform: rotate(180deg);
}
body.dark .menu-bar .mode i.sun{
opacity: 1;
}
body.dark .menu-bar .mode i.moon{
opacity: 0;
}
.sidebar li{
height: 50px;
margin-top: 10px;
list-style: none;
display: flex;
align-items: center;
}
.sidebar li .icon{
display: flex;
align-items: center;
justify-content: center
;
font-size: 20px;
min-width: 60px;
}
.sidebar li .icon, .sidebar li .text{
color: var(--text-color);
transition: var(--tran-03);
}
.sidebar li a{
height: 100%;
display: flex;
width: 100%;
align-items: center;
text-decoration: none;
border-radius: 6px;
transition: var(--tran-04);
}
.sidebar li a:hover{
background: var(--primary-color);
}
.sidebar li a:hover .icon, .sidebar li a:hover .text{
color: var(--sidebar-color);
}
body.dark li a:hover .icon,body.dark .sidebar li a:hover .text{
color: var(--text-color);
transition: var(--tran-03);
}
.sidebar .search-box{
border-radius: 6px;
background: var(--primary-color-light);
transition: var(--tran-05);
}
.search-box input{
height: 100%;
width: 100%;
outline:none;
border:none;
font-size: 16px;
font-weight: 500;
border-radius: 6px;
background: var(--primary-color-light);
transition: var(--tran-05);
}
.sidebar .menu-bar{
height: calc(100% - 60px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-bar .mode{
position: relative;
border-radius: 6px;
background: var(--primary-color-light);
}
.menu-bar .mode .moon-sun{
height: 50px;
width: 60px;
display: flex;
align-items: center;
}
.menu-bar .mode i{
position: absolute;
}
.menu-bar .mode i.sun{
opacity: 0;
}
.menu-bar .mode .toogle-switch{
position: absolute;
display: flex;
height: 100%;
right: 0px;
align-items: center;
justify-content: center;
min-width: 60px;
cursor: pointer;
background: var(--primary-color-light);
}
.toogle-switch .switch{
height: 22px;
width: 44px;
background: var(--toggle-color);
position: relative;
border-radius: 25px;
}
.switch::before{
height: 15px;
width: 15px;
background: var(--sidebar-color);
position: absolute;
content: '';
border-radius: 50%;
top: 50%;
left: 5px;
transform: translateY(-50%);
cursor: pointer;
transition: var(--tran-03);
}
body.dark .switch::before{
left: 25px;
}
.home{
height: 100vh;
width: calc(100% - 280px);
left: 280px;
position: relative;
background:var(--body-color);
transition: var(--tran-05);
}
.home .text{
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 80px 40px;
}
.sidebar.close ~ .home{
width: calc(100% - 88px);
left: 88px;
}Javascript Code
const body = document.querySelector("body"),
sidebar = body.querySelector(".sidebar"),
toggle = body.querySelector(".toggle"),
searchBtn = body.querySelector(".search-box"),
modeSwitch = body.querySelector(".toogle-switch"),
modeText = body.querySelector(".mode-text");
toggle.addEventListener("click", () =>{
sidebar.classList.toggle("close");
})
searchBtn.addEventListener("click", () =>{
sidebar.classList.remove("close");
})
modeSwitch.addEventListener("click", () =>{
body.classList.toggle("dark");
if(body.classList.contains("dark")){
modeText.innerText = "Light Mode";
}else{
modeText.innerText = "Dark Mode";
}
})Output
Design
CSS
Html
responsive
sidemenu
