レスポンシブWebデザインでサイトを作る場合に、メディアクエリとjQueryを使ってメニューの表示を切り替えるものをちょこっと作成。

画面サイズが大きい時は横並びのメニュー、小さい場合は折りたたみメニューにする、という簡単なものです。

レスポンシブWebデザインで折りたたみメニューに切り替える

動きとしてはメディアクエリで表示、非表示等を変更、折りたたみメニューのときは「MENU ▼」をクリックしたときにjQueryでclassをつけたり削除したりしています。

にしてもスマートフォンも混沌としてきましたねぇ。ios、android、windows phone、Tizen、Firefox OS等々、OS自体の数が増え、これからスマートフォンブラウザもいろいろでてくるんでしょうねぇ。。。ふうう。。。

<div class="menubtn">MENU ▼</div>
<nav id="menu" class="togmenu">
<ul>
<li><a href="#">HOME</a></li><li><a href="#">ABOUT</a></li><li><a href="#">NEWS</a></li><li><a href="#">GALLERY</a></li><li><a href="#">BLOG</a></li><li><a href="#">CONTACT</a></li>
</ul>
</nav>

<style>
.togmenu {
	display:none;
}
.menubtn {
	padding: 16px 20px;
	background:#34C6CD;
	color: #fff;
}
#menu ul {
	margin: 0;
	padding: 0;
	background:#34C6CD;
}
#menu li {
	list-style: none;
	border-top: 2px solid #fff;
}
#menu li a {
	padding: 16px 20px;
	display:block;
	text-decoration:none;
	background:#34C6CD;
	color: #fff;
}
@media only screen and (min-width: 800px) {
	.menubtn {
		display:none;
	}
	.togmenu {
		display:block;
	}
	#menu li {
		display: inline-block;
		border:none;
	}
}
</style>

<script>
$(function(){
	$(".menubtn").click(function(){
		$("#menu").toggleClass('togmenu');
	});	
});
</script>