NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

レスポンシブ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;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

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

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com