How To Create an animated Menu Icon with CSS

Hey Everyone Welcome to Frontend Gyaan and My New Blog. In this blog, I will share the code and Trick How to Create Animated Menu icon Only with CSS and javascript.

Follow @frontendgyaan on Instagram for web development content daily.

Also, Check out –

Before starting the blog, you might think about where you can use this project in real-life-based projects.  So it’s an Amazing Menu Icon that you can use in your own Website project and App Project. When clicked or tapped on three parallel horizontal lines (displayed as ≡) opens a side menu or navigation drawer.

Create an animated Menu Icon with CSS frontend Gyaan

1. HTML – Animated Menu Icon

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container" onclick="myFunction(this)">
  <div class="line1"></div>
  <div class="line"></div>
  <div class="line3"></div>
</div>

</body>
</html>

2. CSS

body{
background-color:#20222f;
color:white;}

.container {
  display: inline-block;
  cursor: pointer;
}

.line1, .line2, .line3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  
/* Rotate first line */
.change .line1 {
 -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
 transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .line2 {opacity: 0;}


.change .line3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

3. JavaScript

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

Output

If you found any value in this blog you can support me by buying me a coffee.

If you found any value in this blog you can Follow Instagram Page @frontendgyaan

If you have any idea then you can contact us

Share your love

Leave a Reply