Wikipedia Mobile のようなスライドメニューを簡単に作る

Wikipedia を iPhone で見ると、左上にメニューボタンがあって、それをタップすると左からメニューが表示される、まぁよくあるタイプですが、簡単に実装しましょう。

開閉の制御は jQuery、アニメーションはヒマなんで CSS3 でやりましょう。

HTML

<nav>
	<a href="#">link</a>
	<a href="#">link</a>
	<a href="#">link</a>
</nav>
<div id="content">
	<button id="btn_menu">menu</button>
</div>

Sass

nav {
	width: 200px;
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background: rgb(180, 180, 180);

	a {display: block;}
}
#content {
	width: 100%;
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: rgb(220, 220, 220);
}
#content.menu_open, #content.menu_close {
	@include experimental('animation-duration', 0.5s, webkit);
	$animation-support: webkit;
	@include experimental('animation-iteration-count', 1);
}
#content.menu_open {
	@include experimental('animation-name', menu_on, webkit);
	left: 200px;
}
#content.menu_close {
	@include experimental('animation-name', menu_off, webkit);
	left: 0;
}
@-webkit-keyframes menu_on {0% {left: 0;} 100% {left: 200px;}}
@-webkit-keyframes menu_off {0% {left: 200px;} 100% {left: 0;}}

JavaScript

$(function() {
	$(document)
		.on('touchend', '#btn_menu', function() {
			var $content = $('#content');
			$content.attr('class', $content.hasClass('menu_open') ? 'menu_close' : 'menu_open');
		})
		.on('touchend', '.menu_open', function() {
			$('#content').attr('class', 'menu_close');
		})
	;
});

結果

普段の状態

コンテンツ部分をタップすると元に戻る