hamburger-arrow-transition.txt

HTML:

<div class="menuToggle">
    <span></span>
    <span></span>
    <span></span>
</div>

SCSS:

@mixin menuToggle($width: 3rem, $height: .4rem, $gutter: .5rem) {
    span {
        display: block;
        height: $height;
        position: absolute;
        width: $width;
        transition: margin .2s ease-in-out, width .2s ease-in-out, transform .2s ease-in-out;
        &:nth-child(2) {
            margin-top: $height + $gutter;
        }
        &:nth-child(3) {
            margin-top: ($height + $gutter) * 2;
        }
    }
    &.active span {
        &:nth-child(odd) {
            margin-right: $width / 2;
            width: $width / 2;
        }
        &:nth-child(1) {
            margin-top: $gutter;
            -webkit-transform: rotate(-30deg);
            -moz-transform: rotate(-30deg);
            -ms-transform: rotate(-30deg);
            -o-transform: rotate(-30deg);
            transform: rotate(-30deg);
        }
        &:nth-child(3) {
            margin-top: ($height * 2) + $gutter;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);
        }
    }
}

.menuToggle {
    cursor: pointer;
    height: 40px;
    width: 50px;
    @include menuToggle(3rem, .4rem);
    span {
        background-color: #777;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    &.active span {
        background-color: black;
    }
    position: fixed;
    left: 25px;
    top: 25px;
}

JavaScript:

$(document).ready(function(){
	$('.menuToggle').on('click', function() {
    	$(this).toggleClass('active');
    });
});