Posted on April 24, 2021, 8 p.m. by Bishal ( 2740)
index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>Animated NavBar - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
<div id="ham">
<div id='top'></div>
<div id='middle'></div>
<div id='bottom'></div>
</div>
<div id="header">
<div class="card" style="width: 18rem;">
<ul class="nav-item">
<li class="nav-item">First Item</li>
<li class="nav-item">Second Item</li>
<li class="nav-item">Third Item</li>
</ul>
</div>
</div>
style.css
<head> </head>
of your HTML document:
<link href="style.css" rel="stylesheet">
style.css
file:
#ham {
position: fixed;
z-index: 5;
top: 15px;
left: 15px;
cursor: pointer;
transition: left 500ms ;
}
#ham div {
width: 35px;
height: 2px;
margin-bottom: 8px;
background-color: #008bfcc5;
transition: 500ms;
}
#ham:hover > div {
box-shadow: 0 0 1px #008bfcfa;
}
#ham.active {
left: 230px;
}
#ham.active div {
background-color: #343838;
}
#ham.active:hover > div {
box-shadow: 0 0 1px #343838;
}
#ham.active #top {
transform: translateY(10px) rotate(-135deg);
}
#ham.active #middle {
transform: scale(0);
}
#ham.active #bottom {
transform: translateY(-10px) rotate(-45deg);
}
#header {
position: fixed;
z-index: 4;
overflow: none;
opacity: 0;
}
#header.active {
transition: 3000ms;
left: 0px;
opacity: 1;
}
.nav-item{
list-style: none;
padding: 5%;
font-size: 20px;
font-weight: bold;
}
script.js
<head> </head>
of your HTML document:
<script src="script.js"></script>
script.js
file:
var sidebar = document.querySelector('#header');
var sidebarBtn = document.querySelector('#ham');
sidebarBtn.addEventListener('click', function(event) {
if (this.classList.contains('active')) {
this.classList.remove('active');
sidebar.classList.remove('active');
} else {
this.classList.add('active');
sidebar.classList.add('active');
}
});
<!DOCTYPE html>
<html>
<head>
<title>Animated NavBar - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div id="ham">
<div id='top'></div>
<div id='middle'></div>
<div id='bottom'></div>
</div>
<div id="header">
<div class="card" style="width: 18rem;">
<ul class="nav-item">
<li class="nav-item">First Item</li>
<li class="nav-item">Second Item</li>
<li class="nav-item">Third Item</li>
</ul>
</div>
</div>
</body>
</html>
#ham {
position: fixed;
z-index: 5;
top: 15px;
left: 15px;
cursor: pointer;
transition: left 500ms ;
}
#ham div {
width: 35px;
height: 2px;
margin-bottom: 8px;
background-color: #008bfcc5;
transition: 500ms;
}
#ham:hover > div { box-shadow: 0 0 1px #008bfcfa; }
#ham.active { left: 230px; }
#ham.active div { background-color: #343838; }
#ham.active:hover > div { box-shadow: 0 0 1px #343838; }
#ham.active #top {
transform: translateY(10px) rotate(-135deg);
}
#ham.active #middle {
transform: scale(0);
}
#ham.active #bottom {
transform: translateY(-10px) rotate(-45deg);
}
#header {
position: fixed;
z-index: 4;
overflow: auto;
opacity: 0;
}
#header.active {
transition: 3000ms;
left: 0px;
opacity: 1;
}
.nav-item{
list-style: none;
padding: 5%;
font-size: 20px;
font-weight: bold;
}
var sidebar = document.querySelector('#header');
var sidebarBtn = document.querySelector('#ham');
sidebarBtn.addEventListener('click', function(event) {
if (this.classList.contains('active')) {
this.classList.remove('active');
sidebar.classList.remove('active');
} else {
this.classList.add('active');
sidebar.classList.add('active');
}
});