animate menu icon
.icon-menu
width 40px
height 30px
position: relative
tr(all)
cp()
&:hover
//transform rotate(360deg)
.icon-menu__el
&:nth-child(1)
top 50%
transform rotate(-45deg)
&:nth-child(2)
opacity 0
&:nth-child(3)
top 50%
transform rotate(45deg)
.icon-menu--active
transform rotate(0deg)
&:hover
transform rotate(90deg)
.icon-menu__el
&:nth-child(1)
top 50%
transform rotate(-45deg)
&:nth-child(2)
opacity 0
&:nth-child(3)
top 50%
transform rotate(45deg)
.icon-menu__el
height: 10%
width: 100%
background: black
position: absolute
tr(all)
&:nth-child(1)
top 0
left: 0
&:nth-child(2)
opacity 1
top 50%
left: 0
&:nth-child(3)
top 100%
left: 0
$('.icon-menu').click(function(){
$(this).toggleClass('icon-menu--active');
});
.icon-menu
.icon-menu__el
.icon-menu__el
.icon-menu__el