Hamburger Menu (Mobile Menu)

Create a simple & useful mobile menu

Dependency: jQuery

HTML

<div id="menu-trigger" class="pull-right hamburger-menu">
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

#menu-trigger{
    height: 36px;
    width: 36px;
    margin: 10px;
    span{
        transition: 0.1s linear;
        width: 100%;
        height: 3px;
        margin-top: 6px;
        background-color: white;
        display: block;
    }
    &.active{
        span{
            transition: 0.1s linear;
                &:nth-child(1){
                transform: rotate(45deg);
                position: relative;
                top: 10px;
            }    
            &:nth-child(2){
                display: none;
            }
            &:nth-child(3){
                transform: rotate(-45deg);
                top: 1px;
                position: relative;
            }
        }
    }
}

JavaScript

var $hamburgerMenu = $(".hamburger-menu");

$hamburgerMenu.on("click", function(e) {
        $hamburgerMenu.toggleClass("active");
        $(".mobile-navigation").toggleClass("active");
});