SONICMOOV Googleページ

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

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

  • このエントリーをはてなブックマークに追加

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

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

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

よろしくお願いします。

 

 

PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作ってみました。
最新記事はこちらです。

jQueryで一歩先を行くハンバーガーメニューを実装する方法

 

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

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

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

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

シンプルな骨組みデモ

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

CSSで装飾&応用デモ

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

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

続きを読む

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

手順

  1. jQueryを用意する
  2. HTMLとCSSを用意する
  3. クリックで開閉させる
  4. 開閉でclassを切り替える
  5. その他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 クリックで開閉させる

DEMO 01

jQuery

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

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

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

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

DEMO 02 開閉で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を適用してそれっぽくしています。

5. その他CSSなどで装飾する

基本的に DEMO 01とDEMO 02を元にしてください。

DEMO 03~05は、入れ子にしたり色を変えたり、それっぽい風にしているだけなので、説明は割愛させてください。
CSSをいじるだけでこれくらいはできるよーという勢いでお願いします。

矢印の箇所などはWebフォントなどでよく見られる、きれいなアイコンを用いるとなかなかモダンでしょうか。

DEMO 03 開閉するだけ

DEMO 03 (開閉するだけ)

DEMO 04 class名を切り替える

DEMO 04 (開閉でclassを切り替えて矢印の向きを切り替える)

DEMO 05 さらなる子階層の挿入

DEMO 05 (さらなる子階層の挿入)

参考URL

とってもわかりやすく、参考になりました。
ありがとうございます。

まとめ

物欲に溢れたデモばかりですみません( ˘ω˘ )

少しでもみなさんのお役に立てるようお祈りしてますね。

また次回、よろしくお願いします(°ω°)ノ

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

まりぞー(マークアップエンジニア)

ゆるキャラとFPSゲームとおいしい食べものが好きですヽ(゜ω゜)ノ

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation