Sidebar Menu using HTML CSS and JavaScript

In this article, you will learn how to create a responsive sidebar menu bar using HTML CSS and JavaScript. At first, I created a top bar but did not add any menu items. Just added a logo here and it has a menu button. I’ve added a number of menu items to the sidebar, each with an icon. Under normal circumstances, only icons can be seen and text cannot be seen.

HTML Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div class="wrapper hover_collapse">
  <div class="top_navbar">
    <div class="logo">DeshAmarBD</div>

    <div class="menu"> 
      <div class="hamburger">
        <i class="fas fa-bars"></i>
      </div>
    </div>
  </div>

  <div class="sidebar">
    <div class="sidebar_inner">
      <ul>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-qrcode"></i></span>
            <span class="text">Dashboard</span>
          </a>
        </li>

        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-link"></i></span>
            <span class="text">Shortcuts</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-eye"></i></span>
            <span class="text">Overview</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-book"></i></span>
            <span class="text">Event</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-question-circle"></i></span>
            <span class="text">About</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-pen"></i></span>
            <span class="text">Service</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="icon"><i class="fa fa-id-card"></i></span>
            <span class="text">Contact</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS Code:

*{
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body{
  background: #fafbfc;
}

.top_navbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #1e293b;
  box-shadow: 1px 0 2px rgba(0,0,0,0.125);
  display: flex;
  align-items: center;
}
.top_navbar .logo{
  width: 250px;
  font-size: 25px;
  font-weight: 700;
  padding: 0 25px;
  color: white;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-right: 1px solid #f5f5f5;
}

.top_navbar .menu{
	width: calc(100% - 250px);
	padding: 0 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.top_navbar .hamburger{
	font-size: 25px;
	cursor: pointer;
	color: white;
}

.top_navbar .hamburger:hover{
	color: #007dc3;
}

.sidebar{
	position: fixed;
	top: 60px;
	left: 0;
	width: 220px;
	height: 100%;
	background: #1e293b;
}

.hover_collapse .sidebar{
	width: 70px;
}

.hover_collapse .sidebar ul li a .text{
	display: none;
}

.sidebar ul li a{
	display: block;
	padding: 16px 25px;
	border-bottom: 1px solid #03374e;
	color: #0e94d4;
}

.sidebar ul li a .icon{
	font-size: 18px;
  color: white;
	vertical-align: middle;
}

.sidebar ul li a .text{
	margin-left: 19px;
	color: #fff;
  font-family: sans-serif;
  font-size: 18px;
	letter-spacing: 2px;
}

.sidebar ul li a:hover{
	background: #0e94d4;
	color: #fff;
}

JavaScript Code:

var li_items = document.querySelectorAll(".sidebar ul li");
var hamburger = document.querySelector(".hamburger");
var wrapper = document.querySelector(".wrapper");

li_items.forEach((li_item)=>{
  li_item.addEventListener("mouseenter", ()=>{
    li_item.closest(".wrapper").classList.remove("hover_collapse");
  })
})

li_items.forEach((li_item)=>{
  li_item.addEventListener("mouseleave", ()=>{
    li_item.closest(".wrapper").classList.add("hover_collapse");
  })
})

hamburger.addEventListener("click", () => {
  hamburger.closest(".wrapper").classList.toggle("hover_collapse");
})
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply