Creating a Hoverable Sidebar Menu Using HTML ,CSS & Javascript

Hello friend, I hope you are doing awesome. Today you will learn how to create a Animated Hoverable Sidebar in HTML CSS & Javascript. The interesting in this Sidear menu is, the user-selected mode will not change while the webpage refreshed of the file is reopened. There are lots of Sidebar icon Menu Bar but this sidebar has some advanced features with beautiful UI and UX design.

A sidebar is a virticale section that contains navigation links aligned at the center of the webpage. The main motive of this sidebar is to make it easier for users to be redirected from one webpage to another.

  1. HTML Structure

  2. Hover Effects

Other Beautiful Navebar

  1. CSS Styling

  2. Reset Styles : Remove default margins and paddings to start with a clean slate.

    Navebar Styling : Apply a background color to the navigation bar and clear floats to handle layout.

    Menu List Styling : Remove bullets and float list items horizontally.

    Link Styling : Style link to appeare as block element with padding and set text color and alignment.

    Hover Effecct : Apply hover animation line of the link on hover.

Output


output9
HTML
<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
        <meta name="viewport" content ="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href ="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css">
        <link rel="stylesheet" href ="style.css">
        <title>Responsive Sidebar with icon | BrodScholl </title>
    </head>
  <body id="body-pd">
         <div class="sidebar">
       <div class="logo-details">
         <div class="logo-name"BrodSchool</div>
             <i class="bx bx-menu"id="btn"></i>
           </div>
           <ul class="nav-list">
             <li >
             <i class="bx bx-search"></i>
               <input type="text"placeholder="Search.."/>
               <span class="tool-tip">Search</span>
            </li>
             <li >
               <a href ="#">
               <i class="bx bx-grid-alt"></i>
               <span class="links-name">Dashboard >/span>
               </a>
               <span class="tool-tip">Dashboard</span>
            </li>
             <li >
               <a href ="#">
               <i class="bx bx-user"></i>
               <span class="links-name">User >/span>
               </a>
               <span class="tool-tip">User</span>
            </li>
             <li >
               <a href ="#">
               <i class="bx bx-chat"></i>
               <span class="links-name">Messages >/span>
               </a>
               <span class="tool-tip">Messages</span>
            </li>
             <li >
               <a href ="#">
               <i class="bx bx-pie-chart-alt-2"></i>
               <span class="links-name">Analytics >/span>
               </a>
               <span class="tool-tip">Analytics</span>
            </li>
             <li >
               <a href ="#">
               <i class="bx bx-folder"></i>
               <span class="links-name">File Manager >/span>
               </a>
               <span class="tool-tip">File Manager</span>
            </li>
             <li >
               <a href ="#">
               <i class="bx bx-cart-alt"></i>
               <span class="links-name">Order >/span>
               </a>
               <span class="tool-tip">Order</span>
            </li>
             <li >
               <a href ="#">
               <i class="bx bx-heart"></i>
               <span class="links-name">Saved >/span>
               </a>
               <span class="tool-tip">Saved</span>
            </li>
             <li >
               <a href ="#">
               <i class="bx bx-cog"></i>
               <span class="links-name">Setting >/span>
               </a>
               <span class="tool-tip">Setting</span>
            </li>
       </div>
       <h1>Dashboard</h1>
   </body>
  </html>
CSS
/*default margins and paddings */
   * {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
   }
/*Style the menu items */
   .sidebar {
   position: fixed ;
   left: 0px ;
   top: 0px ;
   height: 100% ;
   width: 76px ;
    padding : 6px  14px; ;
    background : #131311; ;
    z-index : 50; ;
    transition :all 0.5s ease ;
   }
   .sidebar.open {
   width: 249px ;
   }
   .sidebar .logo-details {
   height: 60px ;
   align-items: center ;
   position: relative ;
   display: flex ;
   }
/* === Sidebar === */
   .sidebar.logo-details .icon {
   transition : all 0.5s ease ;
   opacity :0 ;
   }
   .sidebar .logo-details .logo-name {
   Color : #fff ;
   font-size : 20px ;
   font-weight : 600 ;
   opacity : 0 ;
   transition : all 0.5s ease ;
   }
   .sidebar. logo-details #btn {
   position : absolute ;
   top : 50% ;
   cursor : pointer ;
   right : 0 ;
   text-align : center ;
   transition : all 0.4s ease ;
   font-size : 21px ;
   transform : translateY(-50%) ;
   }
   .sidebar i {
   color : #fff ;
   height : 60px ;
   min-width : 50px ;
   font-size : 26px ;
   align-items : center ;
   line-height : 60px ;
   }
   .sidebar i .tooltip {
   position : absolute ;
   z-index : 3 ;
   top : -20px ;
   left : calc(100% + 15px) ;
   box-shadow : 0 5px 10px rgba(0, 0, 0, 0.3) ;
   padding :6px 12px ;
   border-radius :4px ;
   font-size : 15px ;
   font-weight : 400 ;
   opacity : 0 ;
   line-height : 60px ;
   }
   .sidebar  input {
   color : #fff ;
   height : 50px ;
   width : 100% ;
   left : calc(100% + 15px) ;
   border : none ;
   border-radius :12px ;
   font-size : 15px ;
   font-weight : 400 ;
   transition : all 0.5s ease ;
   background-color : #1d1b31 ;
   }
   .home-section {
   position : relative ;
   top : 0px ;
   left : 78px ;
   min-height : 100vh ;
   width : calc(100% - 78px) ;
   left : calc(100% + 15px) ;
   border : none ;
   z-index : 2 ;
   transition : all 0.5s ease ;
   background-color : #f6e407 ;
   }
Javascript
/*JavaScript*/
   
<script>
     let  sidebar=document.querySelector('.sidebar')
     let  closeBtn=document.querySelector('.#btn')  
     let  searchBtn=document.querySelector('.bx-search')  
        closeBtn.addEventListener("click",  ()=>{  
        sidebar.classList.toggle('("open')
        menuBtnChange();
      }) ;
      searchBtn.addEventListener("click",  ()=>  {
      sidebar.classList.toggle("open") ;
      menuBtnChange() ;
   
})  ;
     function  menuBtnChange()  {
       if  (sidebar.classList.contains("open"))  {
         closeBtn.classList.replace("bx-menu", "bx-menu-alt-right") ;
}
       else   {
         closeBtn.classList.replace("bx-menu-alt-right","bx-menu") ;
}
  }
  
</script>



BrodSchool

Jagatpur,
Raebareli 229402, UP,  India
Amresh Kumar (Founder)
Phone: +91 9198 26 3500
Email:suportucracker@gmail.com

copyright © 2025 All Right Reserved.