Hello there! Today, let’s build a simple Sidebar Menu using HTML, CSS, and JavaScript. It’s a great way to enhance navigation on your website. Whether you’re a coding pro or just starting, this tutorial is perfect for adding a functional and stylish sidebar to your projects.
We’ll use HTML for structure, CSS for styling, and JavaScript for a smooth and responsive menu. No complexity here – just straightforward coding to create an effective sidebar for your web content.
Join me in this coding journey into the world of Sidebar Menus. Let’s keep it simple and enjoyable with HTML, CSS, and JavaScript. Ready to elevate your website with a sleek Sidebar Menu? Let’s get started!
HTML :
The given code is an HTML document that represents a sidebar menu for a web application. It includes a navigation bar with various menu links, a search box, and additional options like logout and dark mode. The sidebar can be toggled open or closed using a chevron icon. The code also includes a section for the main content of the web page, in this case, a “Dashboard Sidebar” text.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sidebar Menu</title>
<link rel='stylesheet' href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<nav class="sidebar close">
<header>
<div class="image-text">
<span class="image">
<img src="https://drive.google.com/uc?export=view&id=1ETZYgPpWbbBtpJnhi42_IR3vOwSOpR4z" alt="">
</span>
<div class="text logo-text">
<span class="name">Stella Army </span>
<span class="profession">Web 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="text" placeholder="Search...">
</li>
<ul class="menu-links">
<li class="nav-link">
<a href="#">
<i class='bx bx-home-alt icon'></i>
<span class="text nav-text">Dashboard</span>
</a>
</li>
<li class="nav-link">
<a href="#">
<i class='bx bx-bar-chart-alt-2 icon'></i>
<span class="text nav-text">Revenue</span>
</a>
</li>
<li class="nav-link">
<a href="#">
<i class='bx bx-bell icon'></i>
<span class="text nav-text">Notifications</span>
</a>
</li>
<li class="nav-link">
<a href="#">
<i class='bx bx-pie-chart-alt icon'></i>
<span class="text nav-text">Analytics</span>
</a>
</li>
<li class="nav-link">
<a href="#">
<i class='bx bx-heart icon'></i>
<span class="text nav-text">Likes</span>
</a>
</li>
<li class="nav-link">
<a href="#">
<i class='bx bx-wallet icon'></i>
<span class="text nav-text">Wallets</span>
</a>
</li>
</ul>
</div>
<div class="bottom-content">
<li class="">
<a href="#">
<i class='bx bx-log-out icon'></i>
<span class="text nav-text">Logout</span>
</a>
</li>
<li class="mode">
<div class="sun-moon">
<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="toggle-switch">
<span class="switch"></span>
</div>
</li>
</div>
</div>
</nav>
<section class="home">
<div class="text">Dashboard Sidebar</div>
</section>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
CSS :
The given code is a CSS stylesheet that defines the styling for a web page. It sets various properties such as colors, transitions, and layout for different elements of the page. The code includes styles for a sidebar, header, menu, and a toggle switch for dark mode. The styles are defined using CSS variables for easy customization. The code also includes media queries to adjust the layout for different screen sizes.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
/* ===== Colors ===== */
--body-color: #e4e9f7;
--sidebar-color: #fff;
--primary-color: #dc143c;
--primary-color-light: #f6f5ff;
--toggle-color: #ddd;
--text-color: #707070;
/* ====== Transition ====== */
--tran-03: all 0.2s ease;
--tran-03: all 0.3s ease;
--tran-04: all 0.3s ease;
--tran-05: all 0.3s ease;
}
body {
min-height: 100vh;
background-color: var(--body-color);
transition: var(--tran-05);
}
::selection {
background-color: var(--primary-color);
color: #fff;
}
body.dark {
--body-color: #18191a;
--sidebar-color: #242526;
--primary-color: #3a3b3c;
--primary-color-light: #3a3b3c;
--toggle-color: #fff;
--text-color: #ccc;
}
/* ===== Sidebar ===== */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 250px;
padding: 10px 14px;
background: var(--sidebar-color);
transition: var(--tran-05);
z-index: 100;
}
.sidebar.close {
width: 88px;
}
/* ===== Reusable code - Here ===== */
.sidebar li {
height: 50px;
list-style: none;
display: flex;
align-items: center;
margin-top: 10px;
}
.sidebar header .image,
.sidebar .icon {
min-width: 60px;
border-radius: 6px;
}
.sidebar .icon {
min-width: 60px;
border-radius: 6px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.sidebar .text,
.sidebar .icon {
color: var(--text-color);
transition: var(--tran-03);
}
.sidebar .text {
font-size: 17px;
font-weight: 500;
white-space: nowrap;
opacity: 1;
}
.sidebar.close .text {
opacity: 0;
}
/* =========================== */
.sidebar header {
position: relative;
}
.sidebar header .image-text {
display: flex;
align-items: center;
}
.sidebar header .logo-text {
display: flex;
flex-direction: column;
}
header .image-text .name {
margin-top: 2px;
font-size: 18px;
font-weight: 600;
}
header .image-text .profession {
font-size: 16px;
margin-top: -2px;
display: block;
}
.sidebar header .image {
display: flex;
align-items: center;
justify-content: center;
}
.sidebar header .image img {
width: 40px;
border-radius: 6px;
}
.sidebar header .toggle {
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%) rotate(180deg);
height: 25px;
width: 25px;
background-color: var(--primary-color);
color: var(--sidebar-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
cursor: pointer;
transition: var(--tran-05);
}
body.dark .sidebar header .toggle {
color: var(--text-color);
}
.sidebar.close .toggle {
transform: translateY(-50%) rotate(0deg);
}
.sidebar .menu {
margin-top: 40px;
}
.sidebar li.search-box {
border-radius: 6px;
background-color: var(--primary-color-light);
cursor: pointer;
transition: var(--tran-05);
}
.sidebar li.search-box input {
height: 100%;
width: 100%;
outline: none;
border: none;
background-color: var(--primary-color-light);
color: var(--text-color);
border-radius: 6px;
font-size: 17px;
font-weight: 500;
transition: var(--tran-05);
}
.sidebar li a {
list-style: none;
height: 100%;
background-color: transparent;
display: flex;
align-items: center;
height: 100%;
width: 100%;
border-radius: 6px;
text-decoration: none;
transition: var(--tran-03);
}
.sidebar li a:hover {
background-color: var(--primary-color);
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text {
color: var(--sidebar-color);
}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text {
color: var(--text-color);
}
.sidebar .menu-bar {
height: calc(100% - 55px);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: scroll;
}
.menu-bar::-webkit-scrollbar {
display: none;
}
.sidebar .menu-bar .mode {
border-radius: 6px;
background-color: var(--primary-color-light);
position: relative;
transition: var(--tran-05);
}
.menu-bar .mode .sun-moon {
height: 50px;
width: 60px;
}
.mode .sun-moon i {
position: absolute;
}
.mode .sun-moon i.sun {
opacity: 0;
}
body.dark .mode .sun-moon i.sun {
opacity: 1;
}
body.dark .mode .sun-moon i.moon {
opacity: 0;
}
.menu-bar .bottom-content .toggle-switch {
position: absolute;
right: 0;
height: 100%;
min-width: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
}
.toggle-switch .switch {
position: relative;
height: 22px;
width: 40px;
border-radius: 25px;
background-color: var(--toggle-color);
transition: var(--tran-05);
}
.switch::before {
content: "";
position: absolute;
height: 15px;
width: 15px;
border-radius: 50%;
top: 50%;
left: 5px;
transform: translateY(-50%);
background-color: var(--sidebar-color);
transition: var(--tran-04);
}
body.dark .switch::before {
left: 20px;
}
.home {
position: absolute;
top: 0;
top: 0;
left: 250px;
height: 100vh;
width: calc(100% - 250px);
background-color: var(--body-color);
transition: var(--tran-05);
}
.home .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 12px 60px;
}
.sidebar.close ~ .home {
left: 78px;
height: 100vh;
width: calc(100% - 78px);
}
body.dark .home .text {
color: var(--text-color);
}
JavaScript:
The provided code is a JavaScript snippet that adds event listeners to various elements on a webpage. When the toggle element is clicked, it toggles the “close” class on the sidebar element, which presumably controls the visibility of the sidebar. When the searchBtn element is clicked, it removes the “close” class from the sidebar element. Lastly, when the modeSwitch element is clicked, it toggles the “dark” class on the body element and updates the text content of the modeText element accordingly.
const body = document.querySelector("body"),
sidebar = body.querySelector("nav"),
toggle = body.querySelector(".toggle"),
searchBtn = body.querySelector(".search-box"),
modeSwitch = body.querySelector(".toggle-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";
}
});
There you have it! Building a Sidebar Menu using HTML, CSS, and JavaScript is a breeze. Whether you’re a coding pro or just starting out, this tutorial is a great way to level up your website’s navigation. Keep it simple, have fun coding, and enjoy your newly crafted Sidebar Menu.
If you run into any problems with your project, worry not. The remedy is just a click away—Download the source code and confront your coding challenges with enthusiasm. Enjoy your coding adventure!
