Cacher is the code snippet organizer for pro developers

<div id="humberger">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
</div>
	<ul id="drawernav">
		<li><a href="#test">メニュー</a></li>
		<li><a href="#test">メニュー</a></li>
		<li><a href="#test">メニュー</a></li>
		<li><a href="#test">メニュー</a></li>
	</ul>

header {
		position: fixed;
		width: 100%;
		z-index: 5;
	}
	
	#humberger {
		width: 50px;
		height: 30px;
		background-color: #050e3e;
		float: right;
		padding-top: 10px;
		transition: .3s;
	}
	
	#drawernav{
		position: fixed;
		top: -1500px;
		width: 100%;
		height: 1000px;
		background-color: rgba(5,14,62,0.8);;
		color: #fff;
		z-index: -2;
		padding-top: 40px;
		transition: .3s;
		text-align: center;
}
	#drawernav li a {
		color: #fff;
		display: block;
	}
	
	#drawernav li {
		color: #fff;
	}
	
	li.toplink a {
		width: 100%;
	}

    .drawer-opened #drawernav{
        top: 0;
    }
	
	.icon-bar {
		width: 40px;
		height: 2px;
		margin: 0 auto 7px;
		display: block;
		background-color: #fff;
		transition: .3s;
	}
	
	.drawer-opened #humberger {
		background-color: #fff;
	}
	
    .drawer-opened #humberger .icon-bar{
        background: #050e3e;
    }
    .drawer-opened #humberger :nth-child(1){
        transform:translate(0,8px) rotate(45deg);
        -webkit-transform:translate(0,8px) rotate(45deg);
    }
    .drawer-opened #humberger :nth-child(2){
        transform:translate(-20px ,0);
        -webkit-transform:translate(-20px ,0);
        opacity:0;
    }
    .drawer-opened #humberger :nth-child(3){
        transform:translate(0,-8px) rotate(-45deg);
        -webkit-transform:translate(0,-8px) rotate(-45deg);
    }
	
	.main_contents {
		padding: 40px 0 0 0;
		height: 1000px;
	}

$(function(){
        $("#humberger").on("click", function() {
            $("body").toggleClass("drawer-opened");//追加部分
        });
    });