w3collective · April 26, 2023 02:26 · w3collective · Apr 26, 2023
diff --git a/sidebar-navigation-menu,html b/sidebar-navigation-menu,html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sidebar Navigation Menu</title>
  <style>
    nav {
      background-color: #ccc;
      position: fixed;
      float: left;
      top: 0;
      left: -230px;
      width: 230px;
      height: 100%; 
      transition: all 0.5s ease;
    }
    main {
      width: 90%;
      padding: 0 5%;
      float: right;
      transition: all 0.5s ease;
    }
    body.active nav {
      left: 0px;
    }
    body.active main {
      width: calc(90% - 230px);
    }
  </style>
 </head>
 <body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <main>
    <h3>Example Sidebar Menu</h3>
    <p>Nisi est iste molestiae sed et. Ut ea quam beatae non voluptatem animi quod. Commodi hic ea et. Necessitatibus
      quos alias rerum aut cumque. Et praesentium praesentium molestiae nihil alias. Ducimus ab quia in voluptatem
      cupiditate et. Commodi qui laborum libero quam rem iure at. Voluptates ut laboriosam voluptatibus sed iusto eos.
      Animi non neque omnis in iusto. Voluptatem rerum et et laboriosam optio molestiae est.</p>
    <button type="button" class="toggle-menu">Toggle</button>
  </main>
  <script>
    var toggleMenu = document.querySelector(".toggle-menu");
    toggleMenu.addEventListener("click", () => {
      document.querySelector("body").classList.toggle("active");  
    });
  </script>
 </body>
 </html>
No results found