Responsive Sidebar Menu | Responsive Sidebar Menu Html Css Javascript 

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Responsive Sidebar Menu. We use HTML, Css, and javascript for this Responsive Sidebar Menu. I hope you enjoy our blog so let's start with a basic HTML structure for the Responsive Sidebar Menu.

HTML Code

 <header class="header">  
  <nav class="navbar">  
   <button aria-label="Open Mobile Menu" class="open-mobile-menu">  
    <i class="material-icons" aria-hidden="true">menu</i>  
   </button>  
   <a href="index.html">  
    <h1 class="logo vertical-logo" alt="logo">Mobile Menu</h1>  
   </a>  
   <div class="top-menu-wrapper">  
    <ul class="top-menu">  
     <li class="mob-block">  
      <h1 class="logo" alt="sidebar logo">Mobile Menu</h1>  
      <button aria-label="Close Mobile Menu" class="close-mobile-menu">  
       <i class="material-icons" aria-hidden="true">clear</i>  
      </button>  
     </li>  
     <li><a href="#">Menu Link 1</a></li>  
     <li><a href="#">Menu Link 2</a></li>  
     <li><a href="#">Menu Link 3</a></li>  
     <li><a href="#">Menu Link 4</a></li>  
     <li><a href="#">Menu Link 5</a></li>  
     <li><a href="#">Menu Link 6</a></li>  
     <li><a href="#">Menu Link 7</a></li>  
    </ul>  
   </div>  
  </nav>  
 </header>  

There is all the HTML code for the Responsive Sidebar Menu. Now, you can see an output with Responsive Sidebar Menu then we write javascript for Responsive Sidebar Menu.

output

CSS code

 *, *::before, *::after {  
       padding: 0;  
       margin: 0;  
       box-sizing: border-box;  
 }  
  body {  
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;  
       font-size: 1rem;  
       line-height: 1.5;  
       color: #fff;  
       min-height: 100vh;  
 }  
  ul {  
       list-style: none;  
 }  
  a {  
       text-decoration: none;  
       color: inherit;  
 }  
  img {  
       display: block;  
       max-width: 100%;  
       height: auto;  
 }  
  a, button {  
       cursor: default;  
 }  
  button {  
       color: inherit;  
       background: transparent;  
       border: none;  
       outline: none;  
 }  
  .no-transition {  
       transition: none !important;  
 }  
  .header {  
       position: relative;  
       padding: 1rem 1.5rem;  
       background: #fff;  
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15), 0 2px 1px -5px rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.2);  
 }  
  .header .navbar {  
       display: flex;  
       flex-direction: row;  
       flex: 1;  
       flex-basis: auto;  
       align-items: center;  
       justify-content: space-between;  
 }  
  .header .navbar .vertical-logo {  
       font-size: 1.7rem;  
       font-weight: 700;  
       text-transform: uppercase;  
       color: #d93622;  
 }  
  .header .navbar .top-menu-wrapper {  
       color: #221f1f;  
 }  
  .header .navbar .top-menu-wrapper::before {  
       content: "";  
       position: fixed;  
       top: 0;  
       left: 0;  
       right: 0;  
       bottom: 0;  
       z-index: -1;  
       transition: background 0.5s;  
 }  
  .header .navbar .open-mobile-menu i {  
       color: #221f1f;  
 }  
  .header .navbar .top-menu {  
       position: fixed;  
       top: 0;  
       left: 0;  
       bottom: 0;  
       z-index: 2;  
       transform: translate3d(-100%, 0, 0);  
       transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);  
 }  
  .header .navbar .top-menu {  
       display: flex;  
       flex-direction: column;  
       width: 100%;  
       overflow-y: auto;  
       padding: 1.5rem 1.5rem;  
       background: #fff;  
 }  
  .header .navbar .top-menu-wrapper.show-offcanvas::before {  
       background: rgba(0, 0, 0, 0.5);  
       z-index: 1;  
 }  
  .header .navbar .top-menu-wrapper.show-offcanvas .panel, .header .navbar .top-menu-wrapper.show-offcanvas .top-menu {  
       transform: translate3d(0, 0, 0);  
       transition-duration: 0.7s;  
 }  
  .header .navbar .top-menu-wrapper.show-offcanvas .top-menu {  
       transition-delay: 0.2s;  
 }  
  .header .navbar ul a {  
       display: inline-block;  
       font-size: 1rem;  
       font-weight: 600;  
       text-transform: uppercase;  
       transition: color 0.35s ease-out;  
 }  
  .header .navbar ul a:hover {  
       color: #d93622;  
 }  
  .header .navbar .has-dropdown i {  
       display: none;  
 }  
  .header .navbar .sub-menu {  
       padding: 0.5rem 1.5rem 0 1.5rem;  
 }  
  .header .navbar .sub-menu a {  
       text-transform: capitalize;  
       font-size: 1rem;  
       font-weight: 400;  
       margin-top: 0rem;  
 }  
  .header .navbar .top-menu li + li {  
       margin-top: 1.3rem;  
 }  
  .header .navbar .top-menu .mob-block {  
       display: flex;  
       align-items: center;  
       justify-content: space-between;  
       margin-bottom: 2rem;  
 }  
  .header .navbar .top-menu .mob-block .logo {  
       font-size: 1.7rem;  
       font-weight: 700;  
       text-transform: uppercase;  
       color: #d93622;  
 }  
  .header .navbar .top-menu .mob-block i {  
       color: #221f1f;  
 }  

Css Updated output

Javascript code

 const pageHeader = document.querySelector(".header");  
 const openMobMenu = document.querySelector(".open-mobile-menu");  
 const closeMobMenu = document.querySelector(".close-mobile-menu");  
 const topMenuWrapper = document.querySelector(".top-menu-wrapper");  
 const isVisible = "is-visible";  
 const showOffCanvas = "show-offcanvas";  
 const noTransition = "no-transition";  
 let resize;  
 // Opening Mobile Menu  
 openMobMenu.addEventListener("click", () => {  
  topMenuWrapper.classList.add(showOffCanvas);  
 });  
 // Closing Mobile Menu  
 closeMobMenu.addEventListener("click", () => {  
  topMenuWrapper.classList.remove(showOffCanvas);  
 });  
 // Resizing Screen  
 window.addEventListener("resize", () => {  
  pageHeader.querySelectorAll("*").forEach(function(el) {  
   el.classList.add(noTransition);  
  });  
  clearTimeout(resize);  
  resize = setTimeout(resizingComplete, 500);  
 });  
 function resizingComplete() {  
  pageHeader.querySelectorAll("*").forEach(function(el) {  
   el.classList.remove(noTransition);  
  });  
 }  

Final output

Now that we have completed our javascript section,  Here is our updated output with javascript. Hope you like the Responsive Sidebar Menu. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Responsive Sidebar Menu using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Code by - Syahrizal

Check out more.....

1.html css projects with source code

2. weather app using html css and javascript

3. add to cart button css

4. hamburger menu css

5. multi step form html