Posted on February 11, 2021, at 8:00 PM [IST], created by Admin, Website: codewithbishal.com
Animated navigation bar using JavaScript:
What is an animated navigation bar?
=> Our awesome, animated navigation bar gives visitors an attractive, responsive, and animated navigation bar. You can also add these to your website or to your portfolio and can create a great impression in front of your visitors.
How can I use this animated navigation bar using JavaScript?
=> You can easily copy the code or can download the code from our website and can simply paste it anywhere to get the animated navigation bar.
Do I need to know how to code?
=> No, you don't need to know how to code you can simply copy code from here and paste it wherever you want your animated navigation bar. Also, you can try it on our website using the "TRY IT NOW" option or can download the code using the "Download" button below.
Is it safe to use the animated navigation bar in HTML?
=> Yes, it's completely safe to use the animated navigation bar.
What are the advantages of the animated navigation bar?
=> animated navigation bar is a very good way for generating random passwords on click.
How can I download the source code of the animated navigation bar?
=> Scroll the page to the bottom there you will find our download button to download the code.
Overview of the Blog :
=> In this blog, you can learn, how to make an animated navigation bar using HTML, CSS, and JavaScript By Code With Bishal. Just Copy The Code From Here And Paste It Into Your Website or portfolio. To Preview scroll the page to the beginning. If you are having any problem viewing the code just refresh the page. The animated navigation bar is a lightweight and easy-to-use HTML, CSS, and JavaScript code that creates an animated navigation bar for you. In this blog, there are fifth sections on the webpage, in the first section, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section there are few more coding blogs you might like, in the fourth section you can Try our animated navigation bar using the "TRY IT NOW" button, after that, you can copy the code and paste it [that's the fifth section] and from the last section You can download the source code.
<!DOCTYPE html>
<html>
<head>
<title>animated navigation bar - 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
<link rel="stylesheet" href="style.css">
<style> </style>
<head> </head>
style.css
#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> </script>
app.js
<script src="app.js"></script>
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>Generate Password - 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>
<style>
#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;
}
</style>
<script>
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');
}
});
</script>