Плавная анимация меню-гамбургера


посмотреть как работает можно на моем сайте (для ширины примерно 550пикс)
html
css
js


посмотреть как работает можно на моем сайте (для ширины примерно 550пикс)
html
<a class="btn responsive-menu pull-right" data-toggle="collapse" data-target=".navbar-collapse"> <div class="burger-menu"> <div></div> <div></div> <div></div> </div> </a> |
.btn.responsive-menu{
display: table;
-webkit-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
background: transparent;
box-shadow: none;
}
.btn.responsive-menu .burger-menu{
padding: 5px ;
}
.btn.responsive-menu .burger-menu>div{
width: 100%;
height: 4px;
margin: 5px 0;
border-radius: 2px;
background: #01151c;
-webkit-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
}
.btn.responsive-menu.open{
background: #01151c;
}
.btn.responsive-menu.open .burger-menu>div{
transform: rotate(-45deg);
background: #43b8b5;
}
.btn.responsive-menu.open .burger-menu>div:first-child{
transform: rotate(-45deg) translate(-6px, 6px);
}
.btn.responsive-menu.open .burger-menu>div:last-child{
transform: rotate(45deg) translate(-6px, -7px);
} |
$('.btn.responsive-menu').click(function(){
$(this).toggleClass('open');
}); |