Hello Guys, In this tutorial, I will show you how to create an amazing sidebar menu in HTML, CSS, and Javascript. So, as we all know the importance of navigation menus for a website. How they help users to navigate inside a website. These all qualities of menus make them more important for a website.
Menus are containers containing addresses or links to other sections of a website. A menu basically helps a user to reach different sections of a website. If I talk specifically about the sidebar menu then they are mostly used in the dashboards Layout to navigate its different sections.
If we take an example of a basic menu then it contains a logo, a link list, and some buttons. The sidebar menu we are creating has the same set of contents but the UI we are creating is the differentiator here.
Our sidebar menu has some extra functionalities as well. It is responsive and we can toggle its size. When we toggle our menu it will shrink and we can only be able to see its icons. For toggling we have added a small arrow icon in the menu which on click toggles the width of the menu container.
We have used javascript to add all these dynamic functionalities. For that, we have created a separate file for javascript. In javascript, we used the DOM click event which will track any click on the arrow icon that we have added in our menu and run the toggle method.
We have also added a search box inside the menu which only lets us input anything only when the menu is not in the closed state. So if the menu is closed we can open it by clicking on the search icon. We have added this click event on the search bar because in the closed state we can’t input anything.
I hope you understood all these details about the sidebar menu which we are creating if not then we have shared the source code of the menu in this post. You can download it and run it on your computer. You can also experiment with the source code, that way can better understand its working.
So now let’s learn how to set up files for this sidebar menu on your computer.
Sidebar Menu in HTML CSS and Javascript
So to create all the setup files it would be better to create a separate folder. You can create your folder with any name you want. If you have created the folder then you are all set to create setup files for the project.
After creating the folder we need to create three files inside the folder. These are the three different files for HTML, CSS, and Javascript. Below is the list of files you have to create inside the folder.
index.html
style.css
script.js
Make sure to save the files with the correct file extensions same as mine. Once you create all these three files then follow the steps given below.
1. Open index.html file and paste the given below HTML code inside it. After doing this save the file.
<!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>Sidebar Menu | codingclaw.com</title>
</head>
<body>
<nav class="sidebar close">
<header>
<span class="header-logo">
<img src="./logo.png">
</span>
<span class="header-text">CodingClaw</span>
<i class='bx bx-right-arrow-alt toggle'></i>
</header>
<div class="nav-menu">
<div class="menu-bar">
<li class="menu-search">
<i class="bx bx-search icon"></i>
<input type="text" placeholder="Search..." />
</li>
<ul class="menu-links">
<li class="nav-links">
<a href="#">
<i class="bx bxs-dashboard icon"></i>
<span class="text nav-text">Dashboard</span>
</a>
</li>
<li class="nav-links">
<a href="#">
<i class="bx bx-stats icon"></i>
<span class="text nav-text">Statistics</span>
</a>
</li>
<li class="nav-links">
<a href="#">
<i class="bx bx-calendar icon"></i>
<span class="text nav-text">Calendar</span>
</a>
</li>
<li class="nav-links">
<a href="#">
<i class="bx bx-message-square-detail icon"></i>
<span class="text nav-text">Messages</span>
</a>
</li>
<li class="nav-links">
<a href="#">
<i class="bx bx-share-alt icon"></i>
<span class="text nav-text">Invite Friends</span>
</a>
</li>
</ul>
</div>
<div class="bottom-links">
<li class="nav-links">
<a href="#">
<i class="bx bx-log-out icon"></i>
<span class="text nav-text">Logout</span>
</a>
</li>
</div>
</div>
</nav>
<section class="home">
<h1>Sidebar Menu</h1>
</section>
<script src="script.js"></script>
</body>
</html>
2. Open the style.css file and paste the given below CSS code inside it and save the file.
/* Provided By :- codingclaw.com */
/* font "Poppins" , imported from google fonts */
@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;
font-family: "Poppins", sans-serif;
text-decoration: none;
list-style: none;
}
:root {
/* ##### Colors ##### */
--body-background-color: #212328;
--sidebar-background-color: #fff;
--primary-color: #695cfe;
--secondary-color: #f6f5ff;
--toggle-color: #ddd;
--text-color: #212328;
/* ##### Transition ##### */
--transition-1: all 0.3s ease;
}
body {
display: flex;
padding: 14px;
height: 100vh;
background-color: var(--body-background-color);
}
.sidebar {
display: flex;
flex-shrink: 0;
flex-direction: column;
width: 270px;
height: 100%;
padding: 17px 14px;
background: var(--sidebar-background-color);
border-radius: 10px;
transition: var(--transition-1);
}
.sidebar header {
position: relative;
display: flex;
align-items: center;
margin-top: 10px;
}
.sidebar header .header-logo,
.sidebar .icon {
min-width: 50px;
border-radius: 6px;
}
.sidebar header .header-logo img {
width: 30px;
border-radius: 6px;
}
.sidebar header .header-logo {
display: flex;
justify-content: center;
align-items: center;
}
.sidebar header .header-text {
font-size: 18px;
font-weight: 600;
color: var(--text-color);
}
header .toggle {
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(180deg);
right: -25px;
height: 25px;
width: 25px;
border-radius: 5px;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 22px;
color: var(--sidebar-background-color);
background-color: var(--primary-color);
cursor: pointer;
}
.sidebar .nav-menu {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sidebar .menu-bar {
margin-top: 20px;
}
.menu-search {
background: var(--secondary-color);
border-radius: 10px;
cursor: pointer;
}
.menu-search input {
height: 100%;
width: 100%;
border-radius: 10px;
outline: none;
border: none;
background: var(--secondary-color);
font-size: 17px;
font-weight: 500;
}
.sidebar li {
height: 50px;
display: flex;
align-items: center;
margin-top: 10px;
}
.sidebar li a {
display: flex;
align-items: center;
height: 100%;
width: 100%;
border-radius: 10px;
transition: var(--transition-1);
}
.sidebar li a:hover {
background-color: var(--primary-color);
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text {
color: var(--sidebar-background-color);
}
.sidebar .icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.sidebar .text {
font-size: 17px;
font-weight: 500;
white-space: nowrap;
}
.sidebar .text,
.sidebar .icon {
color: var(--text-color);
}
.sidebar.close {
width: 80px;
}
:is(.sidebar.close) :is(.text, .header-text, .menu-search input) {
display: none;
}
.sidebar.close .toggle {
transform: translateY(-50%) rotate(0deg);
}
.home {
width: 100%;
height: 100%;
}
.home h1 {
font-size: 30px;
font-weight: 600;
color: var(--sidebar-background-color);
padding: 20px 0 0 50px;
transition: var(--transition-1);
}
3. Do the same with script.js and paste the given below Javascript code inside and then save it.
const toggle = document.querySelector(".toggle");
const sidebar = document.querySelector(".sidebar");
const searchBtn = document.querySelector(".menu-search");
toggle.addEventListener("click", ()=>{
sidebar.classList.toggle("close");
})
searchBtn.addEventListener("click", ()=>{
sidebar.classList.remove("close");
})Note: We have also used an image in the menu with the name logo.png, if you want to use your png logo image then just give it the name logo.png and add it to the project folder or you can download the whole project zip with all setup files and images.