web memo

	<div id="sp_navigation">
		<div id="sp_menu">
			<div class="menubt1"></div>
			<div class="menubt2"></div>
			<div class="menubt3"></div>
		</div>
	</div>
	<nav id="site_navigation">
		<ul class="clearfix">
			<li><a href="#uv">KONAYA HOTEL</a></li>
			<li><a href="#hdc">COTE D’AZUR</a></li>
			<li><a href="#sdy">SADOYA</a></li>
			<li><a href="#rd">REAL D’OR</a></li>
			<!-- <li class="gnavi_goods"><a href="#">GOODS</a><a href="#">GOODS</a></li> -->
		</ul>
	</nav>

/* #sp_navigation  */
#sp_navigation {
    cursor: pointer;
    display: block;
    height: 48px;
    position: absolute;
    right: 10px;
    top: 9px;
    width: 48px;
}
#sp_menu {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    position: absolute;
    right: 36px;
    top: 12px;
}
.menubt1, .menubt2, .menubt3 {
    transition: all 0.3s ease-out 0s;
}
.menubt1 {
    background-color: #bad2d6;
    height: 3px;
    position: absolute;
    top: 0;
    width: 24px;
}
.menubt2 {
    background-color: #bad2d6;
    height: 3px;
    position: absolute;
    top: 8px;
    width: 24px;
}
.menubt3 {
    background-color: #bad2d6;
    height: 3px;
    position: absolute;
    top: 16px;
    width: 24px;
}
.activate .menubt1{
	top:8px;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.activate .menubt2{
	opacity: 0;
}
.activate .menubt3{
	top:8px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

JS

$(document).ready(function(){
$(document).on('click', '#sp_navigation', function(event) {
event.preventDefault();
$('#sp_menu').toggleClass('activate');
$('#site_navigation').stop().slideToggle();
});
});