2015.07.16

初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方

また会いましたな！
スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ﾉ
先日、ついにWii UとSplatoonをゲットしました。
そろそろガチバトルでわちゃわちゃするお年頃かもしれません…ガンバルゾー！ガンバルゾー！

今回はjQueryを利用したアコーディオンメニューの作り方をご紹介します。
前回の【初心者向け】レスポンシブなtableを作ってみる同様、初心者向けです。

また、 来年2016年1月12日からIE8がサポート対象外となるので、対応ブラウザはIE9以降とモダンブラウザ系とします。
デモでは割りとシンプルな構造なので、スマホなどたいていの端末で閲覧できると思います。

よろしくお願いします。

そもそもアコーディオンメニューとはなんぞや

読み終わってから「コレジャナイ」状態にならないように、概念を定義しますね。

アコーディオンメニューとは、UIにおける表現方法のひとつです。
開閉(表示/非表示)を切り替えることで、限られたスペースに情報を収めることができます。
アコーディオン楽器のように伸縮する表現がよく見られます。
アコーディオン楽器についてはGoogle先生が詳しいです。

まずはデモをご覧ください。

シンプルな骨組みデモ

DEMO 01 開閉はしますが骨組みの状態
DEMO 02 DEMO 01 + classで矢印などの切り替えができる状態

CSSで装飾＆応用デモ

DEMO 03 シンプルにクリックで開閉
DEMO 04 開閉でclass名を切替えて矢印の状態を切り替え
DEMO 05 さらに子階層を挿入(使い難いと思います)

これらの実装方法をつらつらぽちぽちしていきます。

jQueryアコーディオンメニュー実装方法

手順

jQueryを用意する
HTMLとCSSを用意する
クリックで開閉させる
開閉でclassを切り替える
その他CSSなどで装飾する

1. jQueryを用意する

(°ω°)っ jQuery

2. HTMLとCSSを用意する

HTML

<ul>
	<li>
		<a class="toggle">わたしはメニューです</a>
		<ul class="inner child">
			<li><a href="#demo01">DEMO 01</a></li>
			<li><a href="#demo02">DEMO 02</a></li>
			<li><a href="#demo03">DEMO 03</a></li>
			<li><a href="#demo04">DEMO 04</a></li>
			<li><a href="#demo05">DEMO 05</a></li>
		</ul>
	</li>
	<li>
		<a class="toggle">わたしがメニューです</a>
		<ul class="inner child">
			<li>そげぶ</li>
			<li>もっちゃむ</li>
			<li>ぺけぽん</li>
		</ul>
	</li>
	<li>
		<a class="toggle">わたしのメニューです</a>
		<ul class="inner child">
			<li>ほい</li>
			<li>ほいほいほいっひひほいほいほいほいほい</li>
		</ul>
	</li>
</ul>

HTMLには </body> 直前くらいに下記を挿入します。

このaccordion.jsにjQueryを書きます。

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/accordion.js"></script>

CSS

.child {
	display: none;
}

通常は閉じた状態にしたいので、上記の場合はclass名childにdisplay: none;を指定します。

3. クリックで開閉させる

DEMO 01

jQuery

function demo01() {
	$(this).next().slideToggle(300);
}

$(".toggle").click(demo01);

300の箇所で開閉のスピードを調節します。

4. 開閉でclassを切り替えて矢印の向きを切り替える

DEMO 02

HTML

<ul>
	<li>
		<a class="toggle menu">TOSHIO</a>
		<ul class="inner child">
			<li>POCHI</li>
			<li>TSUTOMU</li>
		</ul>
	</li>
	<li>
		<a class="toggle menu">NOBUNAGA</a>
		<ul class="inner child">
			<li>SAEKI-SAN</li>
			<li>YOSHIMUNE</li>
			<li>KAGEMUSHA</li>
		</ul>
	</li>
	<li>
		<a class="toggle menu">ACE</a>
		<ul class="inner child">
			<li>PINK-CHAN</li>
			<li>MICHIKO</li>
		</ul>
	</li>
</ul>

jQuery

function demo02() {
	$(this).toggleClass("active").next().slideToggle(300);
}

$(".switch .toggle").click(demo02);

クリックでclass名activeを切り替えます。

CSS

.menu:after {
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -14px;
	content: '>';
	font-size: 14px;
	font-weight: bold;
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-moz-transition: all, 0.25s, linear;
	-o-transition: all, 0.25s, linear;
	-webkit-transition: all, 0.25s, linear;
	transition: all, 0.25s, linear;
}

.menu.active:after {
	-moz-transform: translate(0, 50%);
	-ms-transform: translate(0, 50%);
	-webkit-transform: translate(0, 50%);
	transform: translate(0, 50%);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.active にCSSを適用してそれっぽくしています。