Burger to X Click effect

Burger to X from right

What you need to know:

  • How to speed up or slow down click effect? - In transition you have time (.2s), increase or decrease that number if you want to change it. If your time is less then 1s then you dont need to use 0, if its bigger, then just write "1.5s" or anything you need.
  • Can i change burger look ? - Of course, that styles are basics styles, everything in 'You can change it' can be replaced.
  • Is it work on all browsers ? - It should, but if you found any problems, just please report them to me.
  • I need webkits ? - If you are using Sass with auto prefixer then no, If you dont use Sass then i suggest to have them, because of older browsers.

HTML

<div class='burger2'>
<div class='bar1'></div>
<div class='bar2'></div>
<div class='bar3'></div>
</div>

CSS


.burger2 {
/*You can change it*/
padding: 1px;
width: 40px;
height: 40px;
/*You Should leave that*/
cursor: pointer;
position: relative;
}
.burger2 .bar1, .burger2 .bar2, .burger2 .bar3 {
/*You can change it*/
width: 40px;
height: 4px;
border-radius: 2px;
background-color: #fff;
/*Change animation speed here*/
-webkit-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
transition: .2s ease-in-out;
/*You Should leave that*/
position: absolute;
}
.burger2 .bar1 {
top: 0;
}
.burger2 .bar2 {
top: 10px;
}
.burger2 .bar3 {
top: 20px;
}
.animate2 .bar1 {
transform: rotate(-45deg);
top: 10px;
}
.animate2 .bar2 {
opacity: 0;
}
.animate2 .bar3 {
transform: rotate(45deg);
top: 10px;
}

jQuery/JS

var burger2 = $('.burger2');

burger2.click(function() {
burger2.toggleClass('animate2');
});
var burger2 = document.querySelector('.burger2');

burger2.addEventListener('click',function() {
if(burger2.classList.contains('animate2')) {
burger2.classList.remove('animate2');
} else {
burger2.classList.add('animate2');
}
});

Leave a Reply