How to Create Animated Navigation Bar
Posted on April 24, 2021, 8 p.m. by Bishal ( 109)
Hi Everyone, Code With Bishal is back with a new project. So grab your PC and open your favourite Code Editor and start coding with me. In this blog, we will create an animated navbar that will enhance the UI/UX of your website. Continue reading this blog to take a demo of the animated navbar. All the downloadable resources are attached to this blog, You can easily download these with the help of the buttons below.
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 UI experience for the 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.
What are the advantages of the animated navigation bar?
the animated navigation bar is a very good way for using a navbar on a website.
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.
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.
Some Screenshots
Step by step guide of creating an animated navigation bar:
So this time I have something interesting you can put this where your clients or visitors will land or landing page and it will create a navbar with JavaScript animation (This is optimized for desktop as well as for mobile).
-
Create a file with the name
index.html -
Open
index.html -
Add the Broiler plate of HTML
Broiler Plate of HTML:
<!DOCTYPE html>
<html>
<head>
<title>Animated NavBar - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
After adding the broiler plate of HTML add the below code to create a 3 horizontal bar for our header/navbar.
<div id="ham">
<div id='top'></div>
<div id='middle'></div>
<div id='bottom'></div>
</div>
Then add the header links :
<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>
Now, let's add the CSS or style to our HTML file and this will do the styling of our navbar. So our second step is to add the CSS file, you can copy the code from below
-
Create a file
style.css -
Link External CSS file with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<link href="style.css" rel="stylesheet">
Now add some CSS code to the 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;
}
This will style our hamburger menu, and add the below to give a hover effect when someone hovers over it.
#ham:hover > div {
box-shadow: 0 0 1px #008bfcfa;
}
The below code will add style to the menu when it's in the active state,
#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);
}
Now, we have to style the header, the below code will do the work
#header {
position: fixed;
z-index: 4;
overflow: none;
opacity: 0;
}
#header.active {
transition: 3000ms;
left: 0px;
opacity: 1;
}
Now, to style items inside the header or nav links use the code from below
.nav-item{
list-style: none;
padding: 5%;
font-size: 20px;
font-weight: bold;
}
We have successfully added style to our header and now we can move on to our next step that is adding JavaScript.
-
Create a file
script.js -
Link External JavaScript file with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<script src="script.js"></script>
Now add some codes to the 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');
}
});
Source Code
1) HTML Code:
<!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>
2) CSS Code:
#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;
}
3) JavaScript Code:
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');
}
});