Responsive Sidebar Menu | Responsive Sidebar Menu Html Css Javascript







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

Responsive Sidebar Menu | Responsive Sidebar Menu Html Css Javascript

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


Responsive Sidebar Menu | Responsive Sidebar Menu Html Css Javascript

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

Responsive Sidebar Menu | Responsive Sidebar Menu Html Css Javascript

Responsive Sidebar Menu | Responsive Sidebar Menu Html Css Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope 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

Share on:

Leave a Comment