Animated Hamburger Menu Icon From http://codepen.io/kyleknighted/pen/EPLPjo/
$('.hamburger__toggle').on('click', function(evt){
evt.preventDefault();
$(this).toggleClass('hamburger__toggle--open');
});
<div class="hamburger">
<a href="#" class="hamburger__toggle">
<span class="hamburger__line"></span>
<span class="hamburger__line"></span>
<span class="hamburger__line"></span>
</a>
</div>
@import 'bourbon';
*{box-sizing:border-box}
.hamburger {
@include position(absolute, 50% null null 50%);
margin: -15px 0 0 -17px;
&__toggle {
@include transition(background 150ms ease-in-out);
@include size(35px 30px);
display: block;
border-radius: 4px;
padding: 7px 5px;
position: relative;
&:hover {
background-color: #eee;
}
&--open {
.hamburger__line:nth-child(1),
.hamburger__line:nth-child(3) {
@include transition(transform 150ms ease-in 150ms, top 150ms ease-in 0s);
}
.hamburger__line:nth-child(1) {
@include transform(rotate(45deg));
top: 7px;
}
.hamburger__line:nth-child(2) {
@include transition(opacity 0s ease 150ms);
opacity: 0;
}
.hamburger__line:nth-child(3) {
@include transform(rotate(-45deg));
top: -7px;
}
}
}
&__line {
@include transition(transform 150ms ease-in 0s, top 150ms ease-in 150ms, opacity 300ms ease-in 0s);
@include transform(rotate(0deg));
@include size(100% 3px);
display: block;
border-radius: 6px;
background-color: #222;
position: relative;
top: 0;
opacity: 1;
& + & {
margin-top: 4px;
}
}
}