CSS Transition and Transform from Hamburger Bars & # 8594; X per click (with stylus)
I have a menu hamburger icon for a mobile breakpoint. i set it up as 3 lines and i want them to go to X (this will close the menu).
I want the top bar to go 45 degrees, the middle bar to disappear, and the bottom bar to go 45 degrees to the other side. then the top and bottom stripes will move up and create an X
LIKE NOW ... it only animates while I hold my mouse. Why is this so? I just need the animation to be click-complete.
HTML:
<a class="navbar-item-link" "javascript:void(0)" >
<div class="hamburger-icon"><span></span></div>
</a>
Stylus:
.hamburger-icon
&:before, &.hamburger-icon span, &:after
content ''
display block
height 2px
width 20px
background-size 100%
background rgba(255,255,255,0.5)
margin 6px auto 7px auto
transition all 0.2s linear
&:active
&.hamburger-icon span
background-color transparent
&:before
transform rotate(45deg)
top -10px
height 2px
background rgba(255,255,255,0.5)
width 30px
&:after
transform rotate(-45deg)
bottom -10px
height 2px
background rgba(255,255,255,0.5)
width 30px
source to share
:active
acts like a mouse down. When you release the click, the animation will stop.
You have several solutions using JS or CSS .
In CSS, you can use keyframes
to make sure your animation is complete.
In JS you can use click event
which can animate your icon with JS animations or add a class that will hold your clicked properties.
The following example uses a preprocessor. LESS or SASS will have the same syntax:
.hamburger-icon {
/* .hamburger-icon styles */
&.active {
span {
background-color: transparent;
}
&:before {
transform: rotate(45deg);
top: -10px;
height: 2px;
background: rgba(255,255,255,0.5);
width: 30px;
}
&:after {
transform: rotate(-45deg);
bottom: -10px;
height: 2px;
background: rgba(255,255,255,0.5);
width: 30px;
}
}
}
Then in jQuery
$('.hamburger-icon').on('click', function(){
$(this).addClass('active');
});
Hope you understand.
Good luck '
source to share