How can Create a To “Toggle Menu Icon” with Animated?

There are many options for Menu Icon with Animated. But we have a fairly simple process of Menu Icon with Animated.

With the given guidelines you can easily use to Menu Icon with Animated.

1. First, we will Add this HTML.

<div class="menu-icon" onclick="menu_icon_Function(this)">
  <div class="menu-icon-line1"></div>
  <div class="menu-icon-line2"></div>
  <div class="menu-icon-line3"></div>
</div>

2. Second, we will Add this CSS.

.menu-icon {
  display: inline-block;
  cursor: pointer;
}
.menu-icon-line1, .menu-icon-line2, .menu-icon-line3 {
  background-color: #333;
  width: 35px;
  height: 5px;
  margin: 6px 0;
  transition: 0.4s;
}
.change .menu-icon-line1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .menu-icon-line2 {
  opacity: 0;
}
.change .menu-icon-line3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}

3. Third, we will Add this Script.

<script>
function menu_icon_Function(x) {
  x.classList.toggle("change");
}
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *