You are currently viewing Responsive Sidebar Menu using HTML and CSS

Responsive Sidebar Menu using HTML and CSS

Responsive Sidebar Menu using HTML and CSS

 

Responsive Sidebar Menu using HTML and CSS
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

There Is All The Html Code For The Responsive Sidebar Menu. Now, You Can See An Output With a Responsive Sidebar Menu Then We Write Css And Javascript For the Responsive Sidebar Menu.

Only Html Code Output Of Responsive Sidebar Menu

Responsive Sidebar Menu using HTML and CSS
Responsive Sidebar Menu using HTML Code Preview

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

 

 

Responsive Sidebar Menu using HTML and CSS
Responsive Sidebar Menu using HTML and CSS

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

Responsive Sidebar Menu using HTML and CSS
Responsive Sidebar Menu using HTML and CSS

 

Responsive Sidebar Menu using HTML and CSS
Responsive Sidebar Menu using HTML and CSS

Now that we have completed our javascript Code section,  Here is our updated output with Html,Css And 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 !

10+ Javascript Project Ideas For Beginners( Project Source Code)

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

Leave a Reply