How to create a revealing sidebar using HTML, CSS, and JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will see different approaches to finding unique characters in a string. Simply say when a character once occurred in the string then it will not be included in the string again.

Approach

We will follow the below steps to create our design −

STEP 1 − We will create our necessary HTML elements like home, icon, dashboard, and more options which will be present inside the sidebar.
STEP 2 − Then we will design our HTML elements using CSS and we will fix them at their correct positions, in this tutorial we will use internal CSS to avoid making unnecessary external files for CSS and JavaScript, but I recommend you create an external file for CSS and JavaScript too which is considered as best practice.
STEP 3 − Then we will add internal JavaScript code which will include event listener and hovers.

HTML

We will add basic HTML structure and then add font awesome CDN link.

https://use.fontawesome.com/releases/v6.0.0/css/all.css

Then we will add some div section which will have elements like menu item and description of the sidebar. In this style tag section, we will add our CSS styling code and in the script tag section we will add our JavaScript code.

So, our basic HTML structure will be

<!DOCTYPE html>
<html>
<head>
   <title>Revealing sidebar using HTML, CSS and JavaScript</title>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css">
<style>
</style>
</head>
<body>
   <div class="Container">
      <div class="sidebar">
         <div class="details">
         </div>
      </div>
   </div>
   <script>
   </script>
</body>
</html>

Now we will add our desired item to the HTML code, and finally, our HTML section will be.


<!DOCTYPE html>
<html>
<head>
   <title>Revealing item_side_container using HTML, CSS and JavaScript</title>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css">
</head>
<body>
   <div class="Container">
      <div class="section">
         <div class="navB">
            <div class="burgerSign">
               <a href="#">
                  <i class="fas fa-bars"></i>
               </a>
            </div>
         </div>
      </div>
      <div class="item_side_container"> 
         <div class="Details">
            <h3>TutorialsPoint</h3>
         </div>
         <ul>
            <li>
               <a href="#">
                  <span class="icon"><i class="fas fa-home"></i></span>
               </a>
            </li>
            <li>
               <a href="#">
                 <span class="icon"><i class="fas fa-desktop"></i></span>
               </a>
            </li>
            <li>
               <a href="#">
                  <span class="icon"><i class="fa-solid fa-robot"></i></i></span>
               </a>
            </li>
            <li>
               <a href="#">
                  <span class="icon"><i class="fa-solid fa-mobile"></i></span>
               </a>
            </li>
            <li>
               <a href="#">
                  <span class="icon"><i class="fas fa-database"></i></span>
               </a>
            </li>
            <li>
               <a href="#">
                  <span class="icon"><i class="fa-solid fa-code"></i></i></span>
               </a>
            </li>
            <li>
               <a href="#">
                  <span class="icon"><i class="fas fa-cog"></i></span>
               </a>
            </li>
         </ul>
      </div>
   </div>
</body>
</html>

CSS Styling Code

Now we will add our styling code into HTML and apply CSS on HTML items.

First, we will make all browser default styling to none then we will add our styling to the container, items, navbar, hamburger icon etc.

Here is our CSS code.

<style>
   *{
      margin: 0;
      padding: 0;
      text-decoration: none;
      box-sizing: border-box;
      font-family:sans-serif;
   }
   body{
      background: skyblue;
      }
      .Container .section{
      width: calc(100% - 225px);
      margin-left: 225px;
      transition: all 0.5s ease;
   }
   .navB{
      background: rgba(22, 81, 84, 0.8);
      height: 50px;
      display: flex;
      align-items: center;
      padding: 0 30px;
   }
   .burgerSign a{
      font-size: 28px;
      color: #f4fbff;
   }
   .Container .section .navB .burgerSign a:hover{
      color: red;
   }
   .item_side_container{
      background: rgba(11, 119, 124, 0.46);
      position: fixed;
         width: 225px;
      height: 100%;
      padding: 20px 0;
      top: 0px;
      left: 0px;
      transition: all 0.5s ease;
   }
   .Details{
      margin-top: 60px;
      margin-bottom: 30px;
      text-align: center;
   }
   .Details h3{
      color: #ffffff;
      margin: 10px 0 5px;
   }
   .item_side_container ul li a{
      display: block;
      font-size: 16px;
      position: relative;
      padding: 13px 30px;
      border-bottom: 1px solid #10558d;
      color: rgb(241, 237, 237);
   }
   .item_side_container ul li a .icon{
      color: black;
         width: 30px;
      display: inline-block;
      margin-left: 60px;
   }
   .item_side_container ul li a:hover .icon,
   .item_side_container ul li a.active .icon{
      color: red;
   }
   body.active .Container .item_side_container{
      left: -225px;
   }
   body.active .Container .section{
      margin-left: 0;
      width: 100%;
   }
</style>

JavaScript

After adding elements and CSS design we will add an event listener to the hamburger icon and list items inside the sidebar so that when we hover or click on that its color will change by adding the active class.

Finally, our JavaScript code:

<script>
   document.querySelector(".burgerSign").addEventListener("click", function(){
      document.querySelector("body").classList.toggle("active");
   })
</script>

Complete Program

Let’s add all our code to make all elements working, and here is our final program.


<!DOCTYPE html>
<html>
<head>
   <title>Revealing item_side_container using HTML, CSS and JavaScript</title>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css">
   <style>
      *{
         margin: 0;
         padding: 0;
         text-decoration: none;
         box-sizing: border-box;
         font-family:sans-serif;
      }
      body{
         background: skyblue;
      }
      .Container .section{
         width: calc(100% - 225px);
         margin-left: 225px;
         transition: all 0.5s ease;
      }
      .navB{
         background: rgba(22, 81, 84, 0.8);
         height: 50px;
         display: flex;
         align-items: center;
         padding: 0 30px;
      }
      .burgerSign a{
         font-size: 28px;
         color: #f4fbff;
      }
      .Container .section .navB .burgerSign a:hover{
         color: red;
      }
      .item_side_container{
         background: rgba(11, 119, 124, 0.46);
         position: fixed;
         width: 225px;
         height: 100%;
         padding: 20px 0;
         top: 0px;
         left: 0px;
         transition: all 0.5s ease;
      }
      .Details{
         margin-top: 60px;
         margin-bottom: 30px;
         text-align: center;
      }
      .Details h3{
         color: #ffffff;
         margin: 10px 0 5px;
      }
      .item_side_container ul li a{
         display: block;
         font-size: 16px;
         position: relative;
         padding: 13px 30px;
         border-bottom: 1px solid #10558d;
         color: rgb(241, 237, 237);
      }
      .item_side_container ul li a .icon{
         color: black;
         width: 30px;
         display: inline-block;
         margin-left: 60px;
      }
      .item_side_container ul li a:hover .icon,
      .item_side_container ul li a.active .icon{
         color: red;
      }
      body.active .Container .item_side_container{
         left: -225px;
      }
      body.active .Container .section{
         margin-left: 0;
         width: 100%;
      }
   </style>
</head>
<body>
   <div class="Container">
      <div class="section">
         <div class="navB">
            <div class="burgerSign">
               <a href="#">
                  <i class="fas fa-bars"></i>
               </a>
            </div>
         </div>
      </div>
   <div class="item_side_container">
      <div class="Details">
         <h3>TutorialsPoint</h3>
      </div>
   <ul>
   <li>
      <a href="#">
         <span class="icon"><i class="fas fa-home"></i></span>
      </a>
   </li>
   <li>
      <a href="#">
         <span class="icon"><i class="fas fa-desktop"></i></span>
      </a>
   </li>
   <li>
      <a href="#">
         <span class="icon"><i class="fa-solid fa-robot"></i></i></span>
      </a>
   </li>
   <li>
      <a href="#">
         <span class="icon"><i class="fa-solid fa-mobile"></i></span>
      </a>
   </li>
   <li>
      <a href="#">
         <span class="icon"><i class="fas fa-database"></i></span>
      </a>
   </li>
   <li>
      <a href="#">
      <span class="icon"><i class="fa-solid fa-code"></i></i></span> </a>
   </li>
   <li>
      <a href="#">
         <span class="icon"><i class="fas fa-cog"></i></span>
      </a>
   </li>
   </ul>
</div>
</div>
   <script>
      document.querySelector(".burgerSign").addEventListener("click", function(){
         document.querySelector("body").classList.toggle("active");
      })
   </script>
</body>
</html>

Kalyan Mishra

Updated on: 16-Aug-2022

957 Views

Kickstart Your Career

Get certified by completing the course

Get Started