Skip to main content

Hamburger Menu Icon Animation | Rustcode

by Rustcode
Hamburger-Menu-Icon-Animation-html-css-and-javascript

"Hamburger Menu Icon Animation" is used to create an animation effect when the navigation bar is open and close. By the way, you can check out various navigation bars on our website. So Hamburger animation looks very premium effect and makes our website experience better. Due to this animation, we can give an extra effect to the navigation bar.

Hamburger has a lot of animations but here we are just trying one of them. So our hamburger has three equal bars that will change into a cross sign when we click on those bars. We are using javascript for this effect.

We have many articles related to website development, you can see other effects from there too.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Hamburger Menu Icon Animation | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


02. HTML

<body>
  <div class="container" onclick="rotateFunction(this)">
    <div class="strip1"></div>
    <div class="strip2"></div>
    <div class="strip3"></div>
  </div>
  <script type="text/javascript" src="script.js"></script>
</body>



03. css

body{
  padding-top: 330px;
  margin: 0px;
  background: #000;
  text-align: center;
}
.container{
  background: #fff;
  display: inline-block;
  border-radius: 50%;
  padding: 12px 9px;
  box-shadow: 0px 0px 24px 6px rgba(255, 250, 250, 0.15);
  cursor: pointer;
}
.strip1 , .strip2 , .strip3{
  width: 24px;
  height: 3px;
  background: #000;
  margin: 4px;
  transition: .4s;
}
.active .strip1{
  transform: rotate(-45deg) translate(-5px, 5px);
}
.active .strip2{
  opacity: 0;
}
.active .strip3{
  transform: rotate(45deg) translate(-5px, -5px);
}



04. JavaScript

  
function rotateFunction(btn){
  btn.classList.toggle("active");
}


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.






Comments

Post a Comment