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

output-progress
HTML
<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
        <meta name="viewport" content ="width=device-width, initial-scale=1.0">
        <script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
        <title>Circular Progress Bar || BrodScholl </title>
    </head>
  <body id="body-pd">
         <div class="wrap">
           <div class="card">
            <div class="circle">
             <div class="bar"></div>
             <div class="box"> <span></span></div>
         </div>
         <div class="text">HTML & CSS</div>
       </div>
           <div class="card js">
            <div class="circle">
             <div class="bar"></div>
             <div class="box"> <span></span></div>
         </div>
         <div class="text">JavaScript</div>
       </div>
           <div class="card react">
            <div class="circle">
             <div class="bar"></div>
             <div class="box"> <span></span></div>
         </div>
         <div class="text">React Js</div>
       </div>
      </div>
   </body>
  </html>
CSS
/*default margins and paddings */
   * {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
   }
/*Style the box items */
   body {
   display: flex ;
    align-items : center; ;
    justify-content :center ;
    min-height :100vh ;
    padding :20px ;
    background :-webkit-linear-gradient(left, #a445b2, #fa4299) ;
   }
   .wrap {
   width: 800px ;
   display : flex ;
   flex-wrap : wrap ;
   }
   .wrap   .card {
   background: #fff ;
   width: calc(33% - 20px) ;
   height: 300px ;
   border-radius: 5px ;
   flex-direction : column ;
   align-items : center ;
   justify-content : space-between ;
   box-shadow : 0px 10px 15px rgba(0,0,0,0.1) ;
   }
/* === circle === */
   .wrap   .card   .circle {
   position:relative ;
   height : 150px ;
   width : 150px ;
   border-radius :50% ;
   cursor : default ;
   }
   .wrap   .card   .circle {
   height:100% ;
   width : 100% ;
   border-radius :50% ;
   background : #fff ;
   transform : translate(-50%, -50%) scale(0.8) ;
   transition : all 0.2s ;
   }
   .circle   .box   span {
   font-size:38px ;
   font-family : sans-serif ;
   font-weight :600 ;
   transform : translate(-45%, -45%) ;
   transition : all 0.1s ;
   }
   .card   .text {
   font-size:20px ;
   font-weight :600 ;
   }
Javascript
/*JavaScript*/
    <script>
     let  options=  {
       startAngle  :  -1.55  ,
       size  :   150  ,
       value  :   0.85  ,
       fill  :  { gradient  :['#a445b2', '#fa4299'] }
      }
      $(".circle .bar"').circleProgress(options).on ('circle-animation-progress',
   function(event, progress, stepValue) {
   $(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
    }) ;
      $('.js .bar').circleProgress( {
       value: 0.70
     )} ;
      $('.react .bar').circleProgress( {
       value: 0.60
     )} ;
   </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 © 2025 All Right Reserved.