Responsive Side Menu with Pure CSS and JavaScript
Demo links - Live Demo 1 , Live Demo 2
Scroll down for code
HTML
<!DOCTYPE html>
<html>
<head>
<title> Responsive Side Navigation with Pure CSS and JavaScript</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0" />
</head>
<body>
<header>
<div></div>
<div>
<a href="#">THE WEB BLINDERS</a>
</div>
<div class="openSideNav">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none" d="M1.683,3.39h16.676C18.713,3.39,19,3.103,19,2.749s-0.287-0.642-0.642-0.642H1.683
c-0.354,0-0.641,0.287-0.641,0.642S1.328,3.39,1.683,3.39z M1.683,7.879h11.545c0.354,0,0.642-0.287,0.642-0.641
s-0.287-0.642-0.642-0.642H1.683c-0.354,0-0.641,0.287-0.641,0.642S1.328,7.879,1.683,7.879z M18.358,11.087H1.683
c-0.354,0-0.641,0.286-0.641,0.641s0.287,0.642,0.641,0.642h16.676c0.354,0,0.642-0.287,0.642-0.642S18.713,11.087,18.358,11.087z
M11.304,15.576H1.683c-0.354,0-0.641,0.287-0.641,0.642s0.287,0.641,0.641,0.641h9.621c0.354,0,0.642-0.286,0.642-0.641
S11.657,15.576,11.304,15.576z"></path>
</svg>
</div>
<div class="openSideNav"></div>
</header>
<nav class="side-nav">
<div class="close-nav-div closeSideNav">
</div>
<div class="nav-div">
<div class="close-nav closeSideNav">
<svg class="svg-icon" viewBox="0 0 20 20">
<path fill="none"
d="M12.71,7.291c-0.15-0.15-0.393-0.15-0.542,0L10,9.458L7.833,7.291c-0.15-0.15-0.392-0.15-0.542,0c-0.149,0.149-0.149,0.392,0,0.541L9.458,10l-2.168,2.167c-0.149,0.15-0.149,0.393,0,0.542c0.15,0.149,0.392,0.149,0.542,0L10,10.542l2.168,2.167c0.149,0.149,0.392,0.149,0.542,0c0.148-0.149,0.148-0.392,0-0.542L10.542,10l2.168-2.168C12.858,7.683,12.858,7.44,12.71,7.291z M10,1.188c-4.867,0-8.812,3.946-8.812,8.812c0,4.867,3.945,8.812,8.812,8.812s8.812-3.945,8.812-8.812C18.812,5.133,14.867,1.188,10,1.188z M10,18.046c-4.444,0-8.046-3.603-8.046-8.046c0-4.444,3.603-8.046,8.046-8.046c4.443,0,8.046,3.602,8.046,8.046C18.046,14.443,14.443,18.046,10,18.046z">
</path>
</svg>
</div>
<div class="nav-links">
<div class="link">
<a href="#">WELCOME!</a>
</div>
<div class="link">
<a target="_blanc" href="https://www.thewebblinders.in/programming/article/responsive-side-nav-with-pure-css-js-6063">Download Code</a>
</div>
<div class="link">
<a target="_blanc" href="https://www.thewebblinders.in/safebunks">SafeBunks</a>
</div>
<div class="link">
<a target="_blanc" href="https://www.thewebblinders.in/loveanalysis">Love Analysis</a>
</div>
<div class="link">
<a target="_blanc" href="https://www.thewebblinders.in/movietv">MovieTv</a>
</div>
<div class="link">
<a target="_blanc" href="https://www.thewebblinders.in/programming">Programming Blog</a>
</div>
</div>
</div>
</nav>
</body>
</html>
CSS - SIDE MENU
body {
margin: 0 auto;
background-color: #232b2b;
color: wheat;
}
header {
margin: 0 auto 0 auto;
width: 100%;
background-color: #0e1111;
color: wheat;
display: grid;
grid-template-columns: 2em 1fr 2em 0.5em;
padding: 1.2em 0 1.2em;
font-size: 1.2em;
font-weight: bolder;
box-shadow: inset 0 0 5px #000000ad;
}
header div {
display: grid;
align-items: center;
justify-content: center;
}
header a {
color: wheat;
text-decoration: none;
letter-spacing: 0.2em;
}
svg {
cursor: pointer;
}
header .svg-icon {
width: 1.2em;
height: 1.2em;
outline: none;
}
.svg-icon:hover {
transform: scale(0.8, 0.8);
transition: all 0.09s ease;
}
header .svg-icon path,
header .svg-icon polygon,
header .svg-icon rect {
fill: dimgray;
}
.svg-icon circle {
stroke: black;
stroke-width: 1;
}
/*
side navigation
*/
nav.side-nav div.nav-div {
grid-area: nav-div;
background-color: black;
background-color: #0e1111;
box-shadow: inset 0 0 5px #000000ad;
}
nav.side-nav div.close-nav-div {
grid-area: close-nav-div;
}
nav.side-nav {
overflow: hidden;
display: grid;
grid-template-columns: 1fr 400px;
grid-template-areas: 'close-nav-div nav-div';
overflow-y: auto;
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
z-index: 10;
transition: all 0.2s ease-out;
margin-right: -100%;
}
nav.side-nav.active {
transition: all 0.2s ease;
margin-right: 0;
}
nav.side-nav div.close-nav {
text-align: right;
margin: 0 auto 0 auto;
width: 100%;
cursor: pointer;
color: white;
padding: 0.5em 0 0.5em;
}
nav.side-nav svg {
cursor: pointer;
}
nav.side-nav .svg-icon {
width: 3em;
height: 3em;
margin: 0.5em;
}
nav.side-nav div.close-nav .svg-icon path,
nav.side-nav div.close-nav .svg-icon polygon,
nav.side-nav div.close-nav .svg-icon rect {
fill: red;
}
nav.side-nav div.close-nav .svg-icon circle {
stroke: red;
stroke-width: 1;
}
nav.side-nav div.close-nav .svg-icon:hover {
transform: scale(0.8, 0.8);
transition: all 0.09s ease;
}
nav.side-nav div.nav-links {
margin: 0em auto 2em auto;
width: 100%;
}
nav.side-nav div.nav-links div.link {
margin: 0.8em auto 0 auto;
width: 90%;
padding: 0.8em 0 0.8em;
border: 3px solid #232b2b;
text-align: center;
}
nav.side-nav div.nav-links div.link a {
color: wheat;
text-decoration: none;
margin: 0 auto 0 auto;
width: 100%;
display: block;
letter-spacing: 0.1em;
}
nav.side-nav div.nav-links div.link p {
margin: 0 auto 0 auto;
width: 96%;
display: block;
color: dimgray;
padding-top: 0.4em;
font-size: 0.8em;
}
nav.side-nav div.nav-links div.link:hover {
background-color: #232b2b;
transition: all 0.4s linear;
}
@media (max-width:1020px) {
nav.side-nav div.nav-div {
box-shadow: none;
}
nav.side-nav.active {
background-color: black;
background-color: #0e1111;
grid-template-areas: 'nav-div';
grid-template-columns: 1fr;
}
}
/*
Typography
*/
html {
font-size: 16px;
}
@media screen and (min-width: 320px) {
html {
font-size: calc(16px + 6 * ((100vw - 320px) / 680));
}
}
@media screen and (min-width: 1000px) {
html {
font-size: 22px;
}
}SIDE MENU - JAVASCRIPT
class SideNav {
constructor() {
this.sideNav = document.querySelector(`nav.side-nav`);
this.sideNavOpener = document.querySelectorAll(`.openSideNav`);
this.sideNavCloser = document.querySelectorAll(`.closeSideNav`);
}
openSideNav() {
this.sideNav.classList.add("active");
}
closeSideNav() {
this.sideNav.classList.remove("active");
}
init() {
// Side Navigation
this.sideNavOpener.forEach((ele) => {
ele.onclick = () => {
this.openSideNav();
}
});
this.sideNavCloser.forEach((ele) => {
ele.onclick = () => {
this.closeSideNav();
}
});
}
}
var sideNav = new SideNav();
sideNav.init();ALTERNATE TITLES