Do you want you to build a hamburger menu? Why not take a look these four nice and clean animated icons. It builds with CSS, even the buttons are created with CSS.
No need to add Javascript but CSS3 only. The markup is simple with few lines of code. Just get the code and desired CSS to implement on your website.
How to use:
Simply added the style.css file to get started.
<link rel="stylesheet" href="css/style.css">
Each animated icon has separate HTML code. All of the icons created by defining one parent div along with three of child divs.
The child divs are bars which make it look Hamburger button.
Have a look at the code for the first button.
<div class="hamburger" onclick="this.classList.toggle('is-active');">
<div class="bar--1"></div>
<div class="bar--2"></div>
<div class="bar--3"></div>
</div>Each button has it’s own width and height. To add the animation, We have to use the different CSS3 transform and transition property.
.hamburger {
height: 80px;
position: relative;
width: 100px;
margin:0 auto;
}
.hamburger:hover {
cursor: pointer;
}
.hamburger .bar--1 {
animation: bar--1--rev 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}
.hamburger .bar--2 {
transform: scale(1);
transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.hamburger .bar--3 {
animation: bar--3--rev 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}
.hamburger.is-active .bar--1 {
animation: bar--1 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}
.hamburger.is-active .bar--2 {
transform: scale(0);
transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.hamburger.is-active .bar--3 {
animation: bar--3 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}