電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

JavaScriptの基礎④「アコーディオンメニューの実装」

calendar

前回、JavaScriptのイベント処理で横からにゅっと出し入れ出来るメニューバーを作成しました。

今回はその中に「アコーディオンメニュー」を実装する方法についてまとめたいと思います。

こんな感じになります。↓

 

前回までのhtml/css、javascriptファイルに記述を追加していきます。

なお、javaScriptはライブラリを使用していません。

スポンサーリンク

HTML

navタグ内のul,liの要素を上の記述の通り書き換えます。

IDの「la1~3」は、各メニューの親項目ボタン、つまりリスト表示のイベントを発生させる「トリガー」的要素のために記述しています。

ulの「menu1~3」は、リスト表示の出し入れの為に割り振っています。

CSS

ul,liのcssを上の記述に書き換えます。またIDのla1~3、classのclose1~3、class open2 の記述を追加します。

menuボタンとアコーディオンメニューが重なるのを防ぐために、nav要素のtopにpadding:70px;を追加しました。

ul,liについてはアコーディオンメニューのスタイルを調整しています。

前途したとおり、IDのla1~3は、メニューのリスト表示のイベントボタンとなるので、適当に見栄えを整えているだけです。

classのclose1~3は、平常時には隠しておきたいので、「max-height:0;」としています。ここがポイントで、通常の「height:0;」ではなぜか動作に適用されません。「max-height」を使うと、ちゃんと動作に反映されます。

overflow:hidden;は、平常時(height:0時)のテキストを消すためです。

transitionは、アコーディオンの開閉時のヌルっとした動きを付けます。

class open2 は、「max-height:100vh;」、つまり、アコーディオンメニューを表示させるためのclassになります。

ここもポイントで、「vh」の単位にしておかないと、なぜか正常に開閉できないので注意です。%とかは効きません。

JavaScript

定数に、「la1~3」「menu1~3」のIDを取得し、代入したものを追加しています。

後は、下部にある「la1~3」のイベント処理を追加するだけです。

ここでは、「la ID」をクリックするとイベントが発生し、menuのclassに「open2」を追加するといった処理が実行されます。

つまり、リスト表示となるmenu IDには、もともと「max-height:0;」で表示が消えているclassが付与されていますが、イベント処理によって、「max-height:100vh;」のopen2 classが追加され、表示されるといった仕組みです。

また、「classList.toggle()」の記述がありますが、この場合は、イベント処理毎に、指定したIDに付随するclassがカッコ内に記述したclass名でなければ、カッコ内のclassを追加。反対に、カッコ内のclassが付与されていれば外す、といった挙動になります。

つまり、メニューの親項目をクリックするたびに開閉する動作が実現できます。