jquery　ドロワー　スマートフォン　drawer

デモ

ウィンドウ： 480px以下でドロワー表示

<main>
	<div>テキスト テキスト テキスト</div>
	<!-- 以下ドロワー -->
	<div id="sp_content">
		<div id="overlay"></div>
		<div id="humberger">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</div>
		<div id="drawer">
			<li>Menu1</li>
			<li>Menu2</li>
			<li>Menu3</li>
		</div>
	</div>
</main>

/* ドロワー */
#drawer {
	width: 280px;
	height: 100%;
	position: fixed;
	top: 0;
	right: -280px;
	z-index: 1;
	padding-top: 40px;
	color: #fff;
	background: green;
	transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
	transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
}

@media screen and (max-width: 480px) {
	/* スマホパーツ 外包*/
	#sp_content {
		position: relative;
		left: 0;
		z-index: 2;
		background: #fff;
		transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
	}
	.drawer_open #sp_content {
		left: -280px;
		box-shadow: 1px 0 2px #000;
		-webkit-box-shadow: 1px 0 2px #000;
	}

	/* ハンバーガーアイコン */
	#humberger {
		width: 30px;
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 3;
		padding: 7px 7px 0;
		border: 1px solid #ccc;
		border-radius: 5px;
		background: #fff;
		cursor: pointer;
	}
	#humberger .icon-bar {
		display: block;
		height: 2px;
		background: #333;
		margin-bottom: 7px;
		transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
	}
	.drawer_open #humberger :nth-child(1) {
		transform:translate(0, 8px) rotate(45deg);
	}
	.drawer_open #humberger :nth-child(2) {
		transform:translate(-20px, 0);
		opacity:0;
	}
	.drawer_open #humberger :nth-child(3) {
		transform:translate(0, -9px) rotate(-45deg);
	}

	/* オーバーレイ */
	#overlay {
		z-index: -1;
		opacity: 0;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		position: fixed;
		transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
	}
	.drawer_open #overlay {
		z-index: 3;
		left: -280px;
		opacity: 0.3;
		background: #000;
	}

	/* ドロワー */
	.drawer_open #drawer {
		right: 0;
	}
}

onload = function() {
	var touch = false;
	$('#humberger').on('click touchstart', function(e){
		switch (e.type) {
			case 'touchstart':
				drawerToggle();
				touch = true;
				return false;
			break;
			case 'click':
				if(!touch)
					 drawerToggle();
				return false;
			break;
		}
		function drawerToggle(){
			$('body').toggleClass('drawer_open');
			touch = false;
		}
	})
	$('#overlay').on('click touchstart', function() {
		$('body').removeClass('drawer_open');
	})
}