Responsive Sidebar Menu using HTML and CSS

Welcome to the CodeWithRandom blog. In this blog, we learn how to 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 For Responsive Sidebar Menu

<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>

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

100+ Front-end Projects for Web developers (Source Code)

Css Code For Responsive Sidebar Menu

*, *::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;  
}

Only Html + CSS Code Output Of Responsive Sidebar Menu

Javascript Code Responsive Sidebar Menu

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 Of Responsive Sidebar Menu