クリックすれば開閉される「アコーディオンメニュー」は良く使うと思います。
プラグインも多く出ており簡単に実装することができますが、プラグインだとデザインを変更する時に苦労したりします。
プラグインからの装飾に苦労するようであれば、自分で作ったほうが早いかもしれませんね。
アコーディオンメニューはjQueryで簡単に作成することができますので、作り方を解説しようと思います。
簡単なサンプルも作りました。
HTML（アコーディオンメニュー）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <ul> <li> <a class="menu">メニュー1</a> <ul class="menu__child"> <li>メニュー1-1</li> <li>メニュー1-2</li> <li>メニュー1-3</li> </ul> </li> <li> <a class="menu">メニュー2</a> <ul class="menu__child"> <li> <a class="menu">メニュー2-1</a> <ul class="menu__child"> <li>メニュー2-1-1</li> <li>メニュー2-1-2</li> <li>メニュー2-1-3</li> </ul> </li> <li>メニュー2-2</li> <li>メニュー2-3</li> </ul> </li> </ul> |
「ul」と「li」を使って階層を作ります。
「aタグ」に「menu」というクラスを付けておき、クリックされるとメニューを開閉させます。
「ulタグ」に「menu__child」というクラスを付けておきます。このクラスはCSSで非表示にしておきます。
CSS（アコーディオンメニュー）
|
1 2 3 4 5 6 |
li { list-style:none; } ul.menu__child { display:none; } |
「li」のマークを削除して「menu__child」クラスを非表示にします。
スクリプト（アコーディオンメニュー）
|
1 2 3 4 5 |
$(function(){ $('.menu').click(function(){ $(this).next('ul').slideToggle('fast'); }); }); |
[ 2〜4行目 ]
「menu」クラスがクリックされた時の処理を記述します。
3行目でCSSで「none」にしていたクラスを表示させています。
表示にはjQueryの「slideToggle」という関数を利用しており、これは「表示されていなければ表示、表示されていれば非表示する」という特徴を持つ便利な関数です。
以上、アコーディオンメニューは簡単に実装できます。
適用するデザインが複雑な場合はプラグインでは無く、自分で作成するのも手段の1つとして考えても良いかと思います。
サンプルのリンクも載せておきますね。
