レスポンシブWebデザイン時に役立つアコーディオンメニュー

2015年1月6日jQueryのみでつくるギミック

レスポンシブWebデザインをする際、画面が狭くなった時にPCモニタサイズ用に用意していた横並びのメニューを非表示にして、折り畳み式のメニューに切り替えることもあると思うので、そういったケースで役立ちそうなアコーディオン式のメニューを作りました。

今回は切り替えスイッチ部分のメニューとクローズのアイコンをそれぞれCSSで作りましたが、背景画像で実装することも可能です。

デモページ

JavaScript

(function($){
	$(function() {	
			$('#menu .switch').on('click', function() {
				$(this).next().slideToggle(300);
				$(this).toggleClass('active');
			});
	});
})(jQuery);

HTML

<div id="container">
	<div id="menu">
		<div class="switch"></div>
		<ul class="nav">
			<li><a href="javascript:void(0);">menu01</a></li>
			<li><a href="javascript:void(0);">menu02</a></li>
			<li><a href="javascript:void(0);">menu03</a></li>
		</ul>
	</div>
</div>

CSS

#container {
	max-width: 1024px;
	margin: 0 auto;
	padding: 0 30px;
}
#menu .switch {
	position: relative;
	width: 30px;
	height: 30px;
	cursor: pointer;
	margin-left: auto;
}
#menu .switch:before {
	content: "";
	position: absolute;
	border-top: 5px solid #ff5b6b;
	border-bottom: 15px double #ff5b6b;
	width: 30px;
	height: 5px;
}
#menu .active:before,
#menu .active:after {
	content: "";
	position: absolute;
	left: 13px;
	top: 0;
	border: 0;
	background-color: #ff5b6b;
	width: 5px;
	height: 25px;
	transform: rotate(45deg);
}
#menu .active:after {
	transform: rotate(-45deg);
}
#menu .nav {
	display: none;
}
#menu a {
	display: block;
	margin-bottom: 1px;
	padding: 12px;
	background-color: #ff5b6b;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
}

デモページ