How to create a collapsible sidepanel menu with CSS and JavaScript?

Javascript Web Development Front End Technology

A collapsible panel is a basic container coach view that creates a section area that can contain other controls. This section can be lengthy or collapsed to show hide data.

To create a collapsible sidepanel menu we need HTML, CSS, and JavaScript. A collapsible sidepanel will collapse over on the main page. It means the menu bar comes on the page with their respective width and hides the main content of the page with its width; or you will display none for the main content.

In this example, we are creating a webpage displaying the “collapsible sidpanel menu”. A menu with 4 links will appear after a click.

Example.html

Create an HTML file in which we will define the structure (view) of the page. In this example Using the HTML code we are creating the current page with required the text, a collapsible sidepanel menu, and empty navigation Links for the menu.

<div id="content">
   <button class="openbtn" id="openbtn" onclick="show()">☰</button>
   <h2>Collapsed Sideber</h2>
   <p>
      Click on the menu/bar icon to open the sidebar, and it will automatically push this content to the right.
   </p>
   <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus velit fuga accusamus quo placeat cumque iusto. Molestias soluta numquam, dolore debitis consequuntur, magni expedita repellendus amet, eaque exercitationem adipisci. Enim.
   </p>
</div>

Example.css

Add CSS style to give a hover effect on the collapsible sidepanel menu for a better look. In this example, we are styling the collapsible sidepanel if hovering over the link background color will be changed.

<style>
   body {
      font-family: "Lato", sans-serif;
   }
   
   .sidebar {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
   }
   
   .sidebar a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
   }
   
   .sidebar a:hover {
      color: #f1f1f1;
   }
   
   .sidebar .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
   }
   
   .openbtn {
      font-size: 20px;
      cursor: pointer;
      color: black;
      padding: 10px 15px;
      border: none;
   }
   
   .openbtn:hover {
      background-color: #444;
   }
   
   #content {
      transition: margin-left 0.5s;
      padding: 16px;
   }
   
   /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
   
   @media screen and (max-height: 450px) {
      .sidebar {
         padding-top: 15px;
      }
      .sidebar a {
         font-size: 18px;
      }
   }
</style>

Example.js

Using Javascript we can perform validation and the handle event on the page. In this example, creating the show and hide buttons. The navigation will be opened by clicking on the menu bar button, and closed by clicking the cross button. If the collapsible sidepanel is opened, then the main content of the page will disappear.

Let’s see tha javascript code for a better understanding −

<script>
   function show() {
      document.getElementById("mySidebar").style.width = "230px";
      document.getElementById("content").style.display = "none";
   }
   
   function hide() {
      document.getElementById("mySidebar").style.width = "0";
      document.getElementById("content").style.display = "block";
   }
</script>

Complete Example

Let’s see a complete example to create a collapsible sidepanel with the help of CSS, HTML, and Javascript.

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
   body {
      font-family: "Lato", sans-serif;
   }

   .sidebar {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
   }

   .sidebar a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
   }

   .sidebar a:hover {
      color: #f1f1f1;
   }

   .sidebar .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
   }

   .openbtn {
      font-size: 20px;
      cursor: pointer;
      color: black;
      padding: 10px 15px;
      border: none;
   }

   .openbtn:hover {
      background-color: #444;
   }

   #content {
      transition: margin-left 0.5s;
      padding: 16px;
   }

   /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

   @media screen and (max-height: 450px) {
      .sidebar {
         padding-top: 15px;
      }
      .sidebar a {
         font-size: 18px;
      }
   }
   </style>
</head>
<body>
   <div id="mySidebar" class="sidebar">
      <a href="javascript:void(0)" class="closebtn" onclick="hide()">×</a>
      <a href="#">Tutorials</a>
      <a href="#">AboutUs</a>
      <a href="#">Career</a>
      <a href="#">ContactUs</a>
   </div>
   <div id="content">
      <button class="openbtn" id="openbtn" onclick="show()">☰</button>
      <h2>Collapsed Sideber</h2>
      <p>
         Click on the menu/bar icon to open the sidebar, and it will automatically push this content to the right.
      </p>
      <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus velit fuga accusamus quo placeat cumque iusto. Molestias soluta numquam, dolore debitis consequuntur, magni expedita repellendus amet, eaque exercitationem adipisci. Enim.
      </p>
   </div>
   <script>
   function show() {
      document.getElementById("mySidebar").style.width = "230px";
      document.getElementById("content").style.display = "none";
   }

   function hide() {
      document.getElementById("mySidebar").style.width = "0";
      document.getElementById("content").style.display = "block";
   }
   </script>
</body>
</html>