CSS

/*전체 감싸기 { */
#header-menu .drawer-toggle{
    position: relative;
    width: 50px;
    height: 50px;
    display: block;
    color:#ffffff;
    cursor: pointer;
}
/*전체 감싸기 } */

/*공통 { */
#header-menu .drawer-toggle::before{
    content:"";
    position: absolute;
    background:currentColor;
    width: 35px;
    height: 3px;
    left: 4px;
    border-radius: 3px;
    transition: all 0.2s;
}
#header-menu .drawer-toggle > span{
    content:"";
    position: absolute;
    background:currentColor;
    width: 35px;
    height: 3px;
    left: 4px;
    border-radius: 3px;
    transition: all 0.2s;
}
#header-menu .drawer-toggle::after{
    content:"";
    position: absolute;
    background:currentColor;
    width: 18px;
    height: 3px;
    left: 4px;
    border-radius: 3px;
    transition: all 0.2s;
}
/*공통 } */

/*따로 { */
#header-menu .drawer-toggle::before{
    top:8px;
}
#header-menu .drawer-toggle > span{
    top:50%;
    margin-top:-1px;
}
#header-menu .drawer-toggle::after{
    bottom:8px;
}
/*따로 } */

/*액티브 { */
#header-menu .menu-active .drawer-toggle{color:#ffffff;}
#header-menu .menu-active .drawer-toggle::before{transform:rotate(45deg); top:26px; width: 50px; left: 0}
#header-menu .menu-active .drawer-toggle::after{transform: rotate(-45deg); bottom:20px; width: 50px; left: 0}
#header-menu .menu-active .drawer-toggle > span{opacity: 0; visibility: hidden}
/*액티브*/

HTML

<div id="drawer-menu" class="menu">
    <div class="drawer-toggle">
        <span></span>
    </div>
</div>

jQuery

$(document).ready(function(){
            /*PC 메뉴 클릭하면 햄버거 버튼 체인지*/
            $('#drawer-menu').on("click", function(){
                var $drawer_menu = $('#drawer-menu');

                if($drawer_menu.hasClass('menu-active')){ //만약 액티브 상태라면
                    $drawer_menu.removeClass('menu-active'); //언액티브
                } else { //액티브 상태가 아니라면
                    $drawer_menu.addClass('menu-active'); //액티브
                }
            })
        })