Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

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

Front End Technology Javascript Web Development

In this tutorial, we will create a revealing sidebar using HTML, CSS, and JavaScript. A revealing sidebar is a navigation menu that slides in and out of view when toggled, providing a clean and modern user interface.

Approach

We will follow these steps to create our revealing sidebar:

  • STEP 1 ? Create the HTML structure with navigation elements including a hamburger menu icon and sidebar items.
  • STEP 2 ? Style the elements using CSS to position the sidebar and add smooth transitions.
  • STEP 3 ? Add JavaScript functionality to toggle the sidebar visibility with event listeners.

HTML Structure

First, we'll create the basic HTML structure and include Font Awesome for icons:

<!DOCTYPE html>
<html>
<head>
   <title>Revealing Sidebar</title>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css">
</head>
<body>
   <div class="container">
      <div class="main-section">
         <div class="navbar">
            <div class="burger-menu">
               <a href="#"><i class="fas fa-bars"></i></a>
            </div>
         </div>
      </div>
      <div class="sidebar">
         <div class="sidebar-header">
            <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="fas fa-robot"></i></span></a></li>
            <li><a href="#"><span class="icon"><i class="fas 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="fas fa-code"></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

Now we'll add CSS to style the sidebar and create the revealing animation effect:

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

JavaScript Functionality

Finally, we'll add JavaScript to handle the sidebar toggle functionality:

document.querySelector(".burger-menu").addEventListener("click", function(){
   document.querySelector("body").classList.toggle("active");
});

Complete Working Example

Here's the complete implementation:

<!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>
      * {
         margin: 0;
         padding: 0;
         text-decoration: none;
         box-sizing: border-box;
         font-family: sans-serif;
      }
      body {
         background: skyblue;
      }
      .container .main-section {
         width: calc(100% - 225px);
         margin-left: 225px;
         transition: all 0.5s ease;
      }
      .navbar {
         background: rgba(22, 81, 84, 0.8);
         height: 50px;
         display: flex;
         align-items: center;
         padding: 0 30px;
      }
      .burger-menu a {
         font-size: 28px;
         color: #f4fbff;
      }
      .burger-menu a:hover {
         color: red;
      }
      .sidebar {
         background: rgba(11, 119, 124, 0.46);
         position: fixed;
         width: 225px;
         height: 100%;
         padding: 20px 0;
         top: 0;
         left: 0;
         transition: all 0.5s ease;
      }
      .sidebar-header {
         margin-top: 60px;
         margin-bottom: 30px;
         text-align: center;
      }
      .sidebar-header h3 {
         color: #ffffff;
         margin: 10px 0 5px;
      }
      .sidebar ul li a {
         display: block;
         font-size: 16px;
         position: relative;
         padding: 13px 30px;
         border-bottom: 1px solid #10558d;
         color: rgb(241, 237, 237);
      }
      .sidebar ul li a .icon {
         color: black;
         width: 30px;
         display: inline-block;
         margin-left: 60px;
      }
      .sidebar ul li a:hover .icon {
         color: red;
      }
      body.active .sidebar {
         left: -225px;
      }
      body.active .main-section {
         margin-left: 0;
         width: 100%;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="main-section">
         <div class="navbar">
            <div class="burger-menu">
               <a href="#"><i class="fas fa-bars"></i></a>
            </div>
         </div>
      </div>
      <div class="sidebar">
         <div class="sidebar-header">
            <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="fas fa-robot"></i></span></a></li>
            <li><a href="#"><span class="icon"><i class="fas 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="fas fa-code"></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(".burger-menu").addEventListener("click", function(){
         document.querySelector("body").classList.toggle("active");
      });
   </script>
</body>
</html>

How It Works

The sidebar functionality works by toggling the active class on the body element. When active, the sidebar slides left by 225px (its width) using CSS transforms, while the main content expands to fill the full width. The smooth transitions are handled by CSS transition properties.

Conclusion

This revealing sidebar provides an elegant navigation solution using HTML structure, CSS styling with smooth transitions, and JavaScript event handling. The hamburger menu icon toggles the sidebar visibility, creating a responsive and user-friendly interface.

Updated on: 2026-03-15T23:19:00+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements