スマホサイトで一般的に見られるハンバーガーメニューの実装メモ。

サンプル

メニューが開くとハンバーガーメニューが×画像に代わるハズなんですが、toggleClassで追加されるべきclass=”active”がclassだけになっちゃってます。

jQuery

	$(function() {
		$("#menuBtn").click(function() { 
				$("#gNavi").slideToggle('slow');
				$(this).toggleClass("active");
		});
		$("#gNavi li a").click(function() {//メニューリンクをクリックしたらメニューを閉じる
				  $("#gNavi").slideToggle('200');
				$("#menuBtn").removeClass("active");
		});
	 });

css

	#sample_sp_menu #menuBtn{
		position: absolute;
		right: 0;
		top:0;
		width: 50px;
		height: 50px;
		background: url(images/sample_menu_open.png) no-repeat;
		background-size: 50px 50px;
	}
	#sample_sp_menu #menuBtn.active{
		background: url(images/sample_menu_close.png) no-repeat;
		background-size: 50px 50px;
	}

	/*****************  nav ***********************/
	#sample_sp_menu #gNavi{
		display: none;
	
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		background-color: rgba(0,0,0,0.8);
		z-index: 100;
	}
	#sample_sp_menu #gNavi ul{
		width: 90%;
		margin: 0 5%;
	}
	#sample_sp_menu #gNavi li{
		border-top:1px solid #ccc;
		padding: 14px 0 20px;
	}
	#sample_sp_menu #gNavi li a{
		color: #fff;
	}