Animations, Navigation Bar, Unique Menu

Animated navigation bar in Html with code

Hello everyone, today in this blog post we are going to learn how to create an animated navigation bar using Html, CSS, and JavaScript. Last time we discussed how to create a Calculator in Html, CSS and JavaScript .

Navigation bar:

This is the most important component of a website placed at the top of the website. It links different parts of the website. This bar creates links to different pages/sections/ posts and articles so that users can access them from menu buttons. It is very useful for visitors because it saves them time and they can easily access all the content of the website from the top of the website using a menu of the website.

Content in Animated navigation bar:

After clicking on that button we can close the buttons of the website and it converts into a single-button of the website. Then by clicking on that button we can again open the menu of the navbar. So this navbar is animated and we can open and close it using its buttons. When the menu is open then we have the button the close menu

How to create an animated navigation bar in Html and CSS:

We can develop this type of navbar in Html, CSS, and JavaScript. By using Html we can write the content of the navbar. Using CSS we can design the navbar. Javascript is used for the animation of the navigation bar. It is used for adding functionalities to projects.

Html File:

First, you need to create a file navbar.Html in your favorite Editor.

<!--Fantacy Design-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Animated Navigation || Fantact Design</title>
  </head>
  <body>
  <div class="">
      <h1>Animated <span>Navigation</span></h1>
  </div>

    <nav class="active" id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <button class="icon" id="toggle">
        <div class="line line1"></div>
        <div class="line line2"></div>
      </button>
    </nav>
    <script src="script.js"></script>

  </body>
</html>

<!DOCTYPE html>

<head>

<title>Animated Navigation || Fantact Design</title>

</head>

<body>

<h1>Animated <span>Navigation</span></h1>

</div>

<ul>

<li><a href="#">Works</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</button>

</nav>

</body>

</html>

CSS File:

Then create a file with the name navbar.CSS in your editor. Save that file and then paste the following code into your file.

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #eafbff;
  background-image: linear-gradient(
    to bottom,
    #eafbff 0%,
    #eafbff 50%,
    #1DBF73 50%,
    #1DBF73 100%
  );
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}
h1{
  position: absolute;
margin-top:-200px;
margin-left: 0px;
font-size: 40px;
font-weight: 400;

}
span{
  color: #1DBF73;
  font-weight: 900;

}
nav {
  background-color: #fff;
  padding: 20px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: width 0.6s linear;
  overflow-x: hidden;
}

nav.active {
  width: 350px;
}

nav ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 0;
  transition: width 0.6s linear;
}

nav.active ul {
  width: 100%;
}

nav ul li {
  transform: rotateY(0deg);
  opacity: 0;
  transition: transform 0.6s linear, opacity 0.6s linear;
}

nav.active ul li {
  opacity: 1;
  transform: rotateY(360deg);
}

nav ul a {
  position: relative;
  color: #000;
  text-decoration: none;
  margin: 0 10px;
}

.icon {
  background-color: #fff;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  height: 30px;
  width: 30px;
}

.icon:focus {
  outline: 0;
}

.icon .line {
  background-color: #1DBF73;
  height: 2px;
  width: 20px;
  position: absolute;
  top: 10px;
  left: 5px;
  transition: transform 0.6s linear;
}

.icon .line2 {
  top: auto;
  bottom: 10px;
}

nav.active .icon .line1 {
  transform: rotate(-765deg) translateY(5.5px);
}

nav.active .icon .line2 {
  transform: rotate(765deg) translateY(-5.5px);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {

box-sizing: border-box;

}

body {

background-color: #eafbff;

background-image: linear-gradient(

to bottom,

#eafbff 0%,

#eafbff 50%,

#1DBF73 50%,

#1DBF73 100%

);

font-family: 'Muli', sans-serif;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

margin: 0;

}

h1{

position: absolute;

margin-top:-200px;

margin-left: 0px;

font-size: 40px;

font-weight: 400;

}

span{

color: #1DBF73;

font-weight: 900;

}

nav {

background-color: #fff;

padding: 20px;

width: 80px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 3px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

transition: width 0.6s linear;

overflow-x: hidden;

}

nav.active {

width: 350px;

}

nav ul {

display: flex;

list-style-type: none;

padding: 0;

margin: 0;

width: 0;

transition: width 0.6s linear;

}

nav.active ul {

width: 100%;

}

nav ul li {

transform: rotateY(0deg);

opacity: 0;

transition: transform 0.6s linear, opacity 0.6s linear;

}

nav.active ul li {

opacity: 1;

transform: rotateY(360deg);

}

nav ul a {

position: relative;

color: #000;

text-decoration: none;

margin: 0 10px;

}

.icon {

background-color: #fff;

border: 0;

cursor: pointer;

padding: 0;

position: relative;

height: 30px;

width: 30px;

}

.icon:focus {

outline: 0;

}

.icon .line {

background-color: #1DBF73;

height: 2px;

width: 20px;

position: absolute;

top: 10px;

left: 5px;

transition: transform 0.6s linear;

}

.icon .line2 {

top: auto;

bottom: 10px;

}

nav.active .icon .line1 {

transform: rotate(-765deg) translateY(5.5px);

}

nav.active .icon .line2 {

transform: rotate(765deg) translateY(-5.5px);

}

JS File:

Again create a file of Javascript with the name navbar.js and then save it. Copy the code from here and paste it into your file.

const toggle = document.getElementById('toggle')
const nav = document.getElementById('nav')

toggle.addEventListener('click', () => nav.classList.toggle('active'))

const toggle = document.getElementById('toggle')

const nav = document.getElementById('nav')

toggle.addEventListener('click', () => nav.classList.toggle('active'))

In this way, you can create a responsive animated navbar using Html CSS, and JavaScript.

If you are unable to create an animated nav-bar using this code then I have created a file in which all the files are available. You have to download the file. Extract the files. Then run the files without doing a single change to your code.

If you are unable to create an animated navbar using this code then I have created a file in which all the files are available. You have to download the file. Extract the files. Then run the files without doing a single change to your code.

Task

We have designed a beautifully animated navigation bar in Html, CSS, and Js languages. Now we are offering some tasks for you on the basis of the above learning. Create a menu bar at the top of the website and make it sticky. On scrolling down it must not move along with the page and should stick at the top of the website page. Then add a logo on the left side and add these navbar menu items in the right direction. Use color and font family and font size according to your preferences.

Download Source file