How to create navigation bar using JavaScript (animated)

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.


You might like this :

How to create responsive column cards Filter images using JavaScript
How to create accordion using JavaScript Count down timer using JavaScript Glowing Button using CSS





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). The first step is to add the broiler plate of HTML, you can add this from below.

Step 1

=> Add the Broiler plate of HTML 
              

<!DOCTYPE html>

<html>

<head>

<title>animated navigation bar - 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

Step 2)

=> Add CSS (External or Internal)

If you are using External CSS then create a file

                
                    style.css

And add code :

                
<link rel="stylesheet" href="style.css">

If you want to use Internal CSS than add

                <style>   </style>

tag Between

                <head>   </head>
then add the CSS code between style tag or inside 
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;
}

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 JavaScript
Step 3)

Add JavaScript (Internal or external)

If you are using an Internal script then add the JavaScript code (copy from below) in between :
                
                    <script>   </script>
and If you are using external JavaScript then create a file

                    app.js
and add :

        <script src="app.js"></script>
In your HTML file and add the below code inside the JS file to add the animation to the menu


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');
}
});

OR copy the code from below


Step 1) Add your HTML Code -

HTML Code

<!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>
Copy Contents

Step 2) Add your CSS Code -

CSS Code
              
<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>
Copy Contents

Step 3) Add your JavaScript Code -

JavaScript Code
                
<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>
Copy Contents

Download Source Code


Leave a Comment:

Comments:


cmt-img
baileypaz
Everything is very open with a precise description of the challenges. It was truly informative. Your website is extremely helpful. Thanks for sharing!

Search
Categories