また会いましたな!
スイカバー(ふつうのやつ)をこよなく愛するマークアップエンジニアのまりぞーですヽ(°ω°)ノ
先日、ついに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

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

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

CSS

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

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

DEMO 01 クリックで開閉させる

DEMO 01

jQuery

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

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

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

DEMO 02

HTML

jQuery

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

CSS

.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

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

まとめ

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

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

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

あわせて読みたい記事