ハンバーガーメニュー

cssのみでハンバーガーメニュー

<div id="sp_nav_wrapper">
	<span id="sp_nav_button" onClick="sp_global_menu_display();"></span>
</div>

#sp_nav_wrapper {
	display: block;
	position: absolute;
	top: 38px;
	right: 10px;
	width: 50px;
	height: 50px;
}

#sp_nav_button,
#sp_nav_button::before,
#sp_nav_button::after {
	content: "";
	display: block;
	width: 40px;
	height: 5px;
	background: #000000;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.5s;
}

#sp_nav_button {
	position: relative;
	margin: 5px 0;
}

#sp_nav_button::before,
#sp_nav_button::after {
	position: absolute;
}

#sp_nav_button::before {
	top: 10px;
}

#sp_nav_button::after {
	bottom: 10px;
}

.sp_nav_button_active {
	background: transparent!important;
}

.sp_nav_button_active::after{
	top: 0!important;
	transform: rotate(-45deg);
}

.sp_nav_button_active::before {
	top: 0!important;
	transform: rotate(45deg);
}

jsでクリックイベントを作れば，メニューを表示できる。

ハンバーガーメニューは×に変わる。（バツがいやだったら，CSSの.sp_nav_button_activeもしくはJSのsetattributeをなくせばよい）

function sp_global_menu_display(){
	var span=document.getElementById('sp_nav_button');
	if(条件式){//メニューが表示されている条件式を入力
		span.removeAttribute('class');
	}else{
		span.setAttribute('class','sp_nav_button_active');
	}
}