In this article, we will go over how to create a sidebar menu using HTML, CSS, and JavaScript. A sidebar is a navigation menu that is typically placed on the left or right side of a web page and contains a series of links. These links allow users to navigate to different pages on the website. The sidebar menu also has the ability to open and close, allowing users to expand or hide the menu as needed.
Creating a sidebar menu for a website can greatly enhance the user experience by providing an easy-to-use navigation system for users to access different pages on the website. A sidebar menu is typically placed on the left or right side of a web page and contains a series of links. These links allow users to navigate to different pages on the website, and the sidebar menu also has the ability to open and close, allowing users to expand or hide the menu as needed.
Take a look at the following image of a sidebar menu. The image on the left shows the sidebar menu in its open state, while the image on the right shows the menu in its closed state.
Responsive Sidebar Navigation Menu using HTML, CSS and JavaScript
To create a sidebar menu, you will need to create two separate files: an HTML file and a CSS file. Once these files are created, you can copy and paste the provided code into them. Alternatively, you can also download all of the source code files from the provided download button.
The HTML code for the sidebar menu will be used to create the structure of the menu and include the necessary navigation links.
<!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">
<!----======== CSS ======== -->
<link rel="stylesheet" href="style.css">
<!----===== Boxicons CSS ===== -->
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
<title>Dashboard Sidebar Menu</title>
</head>
<body>
<nav class="sidebar close">
<header>
<div class="image-text">
<span class="image">
<h1>CZ</h1>
</span>
<div class="text logo-text">
<span class="name">Codewithzan</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>
</div>
</div>
</nav>
<section class="home">
<div class="text">Dashboard</div>
</section>
<script>
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");
})
</script>
</body>
</html>
The CSS code will be used to style the menu and determine how it looks and behaves.
/* Google Font Import - Poppins */
@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;
}
body{
min-height: 100vh;
background-color: #E4E9F7;
transition: all 0.3s ease;
}
::selection{
background-color: #695CFE;
color: #fff;
}
/* ===== Sidebar ===== */
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 250px;
padding: 10px 14px;
background: #FFF;
transition: all 0.3s ease;
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: #707070;
transition: all 0.2s ease;
}
.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 h1{
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: #695CFE;
color: #FFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
cursor: pointer;
transition: all 0.3s ease;
}
body.dark .sidebar header .toggle{
color: #707070;
}
.sidebar.close .toggle{
transform: translateY(-50%) rotate(0deg);
}
.sidebar .menu{
margin-top: 40px;
}
.sidebar li.search-box{
border-radius: 6px;
background-color: #F6F5FF;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar li.search-box input{
height: 100%;
width: 100%;
outline: none;
border: none;
background-color: #F6F5FF;
color: #707070;
border-radius: 6px;
font-size: 17px;
font-weight: 500;
transition: all 0.3s ease;
}
.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: all 0.2s ease;
}
.sidebar li a:hover{
background-color: #695CFE;
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text{
color: #FFF;
}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text{
color: #707070;
}
.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;
}
.home{
position: absolute;
top: 0;
top: 0;
left: 250px;
height: 100vh;
width: calc(100% - 250px);
background-color: #E4E9F7;
transition: all 0.3s ease;
}
.home .text {
font-size: 30px;
font-weight: 500;
color: #707070;
padding: 12px 60px;
}
.sidebar.close~.home {
left: 78px;
height: 100vh;
width: calc(100% - 78px);
}
Overall, creating a sidebar menu using HTML, CSS, and JavaScript is a straightforward process. By following the provided code and instructions, you should be able to easily create a functional and visually appealing sidebar menu for your website.