クリックで横からスライドして現れるメニュー

スマホのサイトなんかにある、ハンバーガーメニューをクリックすると横からスライドして現れるメニューです。
半透明になっている黒の背景をクリックするとメニューを閉じることができます。

ソースコード

HTML

<!-- ======== nav ======== -->
<nav>
	<div id="glaylayer"></div>
	<ul id="slidemenu">
		<li><a href="#">メニュー１</a></li>
		<li><a href="#">メニュー２</a></li>
		<li><a href="#">メニュー３</a></li>
		<li><a href="#">メニュー４</a></li>
	</ul>
</nav>
<!-- ======== /nav ======== -->
<!-- ======== main ======== -->
<div class="main">
	<div class="container">
		<main>
			<button id="hamburgerbtn">
				<span></span>
				<span></span>
				<span></span>
				<p>menu</p>
			</button>
		</main>
	</div>
</div>
<!-- ======== /main ======== -->

CSS

main {
	padding: 30px 0;
	text-align: center;
}
#hamburgerbtn {
	background: #000;
	color: #fff;
	border: none;
	padding: 10px 12px 8px;
	cursor: pointer;
}
#hamburgerbtn span {
	display: block;
	width: 100%;
	height: 4px;
	background: #fff;
	border-radius: 4px;
	margin-bottom: 8px;
}
#hamburgerbtn span:nth-of-type(3) {
	margin-bottom: 3px;
}
#slidemenu {
	display: none;
	position: fixed;
	top: 0;
	width: 70%;
	max-width: 400px;
	height: 100%;
	background: #333;
	list-style: none;
}
#slidemenu a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 20px;
}
#slidemenu a:hover, #slidemenu a:active {
	background: #666;
}
#glaylayer {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.3;
}

JavaScript

$(function(){

	//ハンバーガーボタンをクリックしたときの処理
	$('#hamburgerbtn').click(function(){
		$('#glaylayer:not(:animated)').fadeIn('fast');
		$('#slidemenu:not(:animated)').css({
			'left' : -1*$('#slidemenu').width(),
			'display' : 'block'	
		}).animate({
			'left' : 0
		},'fast');
	});
	
	//背景をクリックしたときの処理
	$('#glaylayer').click(function(){
		$('#glaylayer:not(:animated)').fadeOut('fast');
		$('#slidemenu:not(:animated)').animate({
			'left' : -1*$(this).width()
		},'fast',function(){
			$(this).css({
				'display' : 'none'	
			});
		});
	});
	
});

簡単な解説

まずはHTMLとCSSでハンバーガーボタンとメニューを作ります。
このあたりはお好みで。
重要なのはメニュー（#slidemenu）の幅のサイズと画面いっぱいに表示される半透明な黒の背景（#glaylayer）です。
このサンプルでは#glaylayerをクリックしてメニューを閉じるようにするので、メニューの幅をウィンドウの幅より小さくして#glaylayerをクリックできるようにします。
メニューが完成したらdisplay:none;で非表示にして、ハンバーガーボタンをクリックしたらメニューが出てくるようにスクリプトを記述します。

メニューを横からスライドさせる処理

.click()を使ってハンバーガーボタンがクリックされたときの処理を記述します。

//ハンバーガーボタンをクリックしたときの処理
$('#hamburgerbtn').click(function(){
	$('#glaylayer:not(:animated)').fadeIn('fast');
	$('#slidemenu:not(:animated)').css({
		'left' : -1*$('#slidemenu').width(),
		'display' : 'block'	
	}).animate({
		'left' : 0
	},'fast');
});

ハンバーガーボタンがクリックされたら.fadeIn()を使って#glaylayerを表示。

$('#glaylayer:not(:animated)').fadeIn('fast');

それと同時に#slidemenuを横からスライドさせます。
そのためにまずは#slidemenuの位置を.css()を使って#slidemenuの幅だけ左方向にずらして表示させます。
#slidemenuの幅は.width()を使って取得しています。
これでウィンドウの左側の見えない位置に#slidemenuが表示されるので、あとは.animate()を使ってleftが0になる位置までアニメーションさせれば、横からスライドして現れたように見えます。

$('#slidemenu:not(:animated)').css({
	'left' : -1*$('#slidemenu').width(),
	'display' : 'block'	
}).animate({
	'left' : 0
},'fast');

これでハンバーガーボタンをクリックしたら背景とメニューが表示されるようになります。

背景をクリックでメニューを非表示にする処理

次は背景#glaylayerをクリックしたらメニューが非表示になる処理です。

//背景をクリックしたときの処理
$('#glaylayer').click(function(){
	$('#glaylayer:not(:animated)').fadeOut('fast');
	$('#slidemenu:not(:animated)').animate({
		'left' : -1*$(this).width()
	},'fast',function(){
		$(this).css({
			'display' : 'none'	
		});
	});
});

#glaylayerをクリックしたら起こるイベントなのでここでも.click()を使います。
まずは表示のときと逆で.fadeOut()を使って#glaylayerをフェードアウトさせます。

$('#glaylayer:not(:animated)').fadeOut('fast');

それと同時に.animate()を使って#slidemenuを#slidemenuの幅だけ左に移動させます。
これも表示のときの逆ですね。
あとはアニメーションが終わったあとにメニューが非表示になるように、コールバック関数で#slidemenuを非表示すれば完了です。

$('#slidemenu:not(:animated)').animate({
	'left' : -1*$(this).width()
},'fast',function(){
	$(this).css({
		'display' : 'none'	
	});
});

おわりに

スマホで見るWebサイトにはこの手のメニューが多い印象なので、使う機会は多そうです。
ハンバーガーボタンの位置を固定したり、メニューに閉じるボタンを追加してわかりやすくしたり、いろいろ変更や改良を加えて使ってみてください。