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

output16
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://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap">
        <link rel="stylesheet" href ="style.css">
        <title>Dashboard Sidebar with Darkmode </title>
    </head>
  <body id="body-pd">
         <div class="l-navbar" id="navbar">
       <nav class="nav">
         <div>
         <div class="nav-brand">
           <ion-icon name="menu-outline"class="nav_toggle"id="nav-toggle"></ion-icon>
             <a href ="#"class="nav-logo">BrodSchool</a>
           </div>
           <div class="nav-list">
             <a href ="#"class="nav-link active">
           <ion-icon name="home-outline"class="nav-icon"></ion-icon>
               <span class="nav-name">Dashboard</span>
               </a>
             <a href ="#"class="nav-link">
           <ion-icon name="chatbubbles-outline"class="nav-icon"></ion-icon>
               <span class="nav-name">Messenger</span>
               </a>
                   <div class="nav-link collapse">
           <ion-icon name="folder-outline"class="nav-icon"></ion-icon>
                    <span class="nav-name">Projects</span>
           <ion-icon name="chevron-down-outline"class="collapse-link"></ion-icon>
                 <ul class ="collapse-menu">
                 <a href ="#"class="collapse-sublink">Data</a>
                 <a href ="#"class="collapse-sublink">Group</a>
                 <a href ="#"class="collapse-sublink">Member</a>
                </ul>
                   </div>
             <a href ="#"class="nav-link">
           <ion-icon name="pie-chart-outline"class="nav-icon"></ion-icon>
               <span class="nav-name">Analytics</span>
               </a>
                   <div class="nav-link collapse">
           <ion-icon name="people-outline"class="nav-icon"></ion-icon>
                    <span class="nav-name">Projects</span>
           <ion-icon name="chevron-down-outline"class="collapse-link"></ion-icon>
                 <ul class ="collapse-menu">
                 <a href ="#"class="collapse-sublink">Data</a>
                 <a href ="#"class="collapse-sublink">Group</a>
                 <a href ="#"class="collapse-sublink">Member</a>
                </ul>
                   </div>
             <a href ="#"class="nav-link">
           <ion-icon name="settings-outline"class="nav-icon"></ion-icon>
               <span class="nav-name">Settings</span>
               </a>
                 </div>
             </div>
             <a href ="#"class="nav-link">
           <ion-icon name="log-out-outline"class="nav-icon"></ion-icon>
               <span class="nav-name">Log Out</span>
               </a>
         </nav>
       </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 */
   :root {
   --nav-width: 92px ;
   --first-color: #0C5DF4 ;
   --bg-color: #12192C ;
    --sub-color: #B6CEFC ;
   --white-color : #FFF ;
   --z-fixed: #002F6C ;
   --tran-03: 100 ;
    }
   body {
   position: relative ;
    padding : 32px 0 0 6.75rem; ;
    transition :0.5s ;
   }
   ul {
   margin: 0px ;
   padding : 0px ;
   list-style : none ;
   }
   a {
   text-decoration: none ;
   }
/* === Sidebar === */
   l-navbar : {
   position:fixed ;
   top : 0px ;
   left : 0px ;
   height : 100vh ;
   width : var(--nav-width) ;
   Color :var(--white-color) ;
   background-color : var(--bg-color) ;
   transition : var(--tran-05) ;
   padding :1.5rem 1.5rem 2rem ;
   z-index : var(--z-fixed) ;
   }
   .nav {
   height : 100% ;
   display : flex ;
   flex-direction : column ;
   justify-content : space-between ;
   overflow : hidden ;
   }
   .navbar-brandd {
   height : 50px ;
   list-style : none ;
   display : flex ;
   align-items : center ;
   margin-top : 10px ;
   }
   .nav-toggle {
   font-size : 1.26rem ;
   padding : .75rem ;
   cursor : pointer ;
   }
   .nav-link {
   display : grid ;
   grid-template-columns : max-content max-content ;
   align-items : center ;
   column-gap : .75rem ;
   padding : .75rem ;
   color : var(--white-color) ;
   border-radius : .5rem ;
   margin-bottom : 16px ;
   transition : .3s ;
   cursor : pointer ;
   }
Javascript
/*JavaScript*/
    <script>
     const  showMenu=(toggleId, navbarId, bodyId)=>  {
     const  toggle=document.getElementById(toggleId),  
     const  navbar = document.getElementById(navbarId),  
     const   bodypadding = document.getElementById(bodyId)  

        if(toggle && navbar){  
        toggle.addEventListener('click', ()=>{  
        navbar.classList.toggle('expander')
        bodypadding.classList.toggle('body-pd')
      })
    }
   }
      &showMenu('nav-toggle','navbar','body-pd')
      const  linkColor =  document.querySelectorAll('.nav-list')
      function colorLink()  {
      linkColor.forEach(l=> l.classList.remove('active'))
      this.classList.add('active'))
    })
   </script>



BrodSchool

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

Usefull link

Home
About
Contact us
Privacy Policy
Term and Condition

Quick Link

HTML & CSS
JavaScript
Project
Others

copyright © 2024 All Right Reserved.