2021/12/15 よりサイトリニューアルしました

横並びのアコーディオンメニューを「javascript」で実装する方法

横並びプルダウンメニュー

前回、javascriptで縦並びのアコーディオンメニューの実装方法についてまとめました。↓

 

今回は横並びのアコーディオンメニューを実装方法についてまとめたいと思います。

仕上がりはこんな感じになります。

 

HTML

header内のnavタグ要素が今回のアコーディオンメニューの記述になります。

<li id>をjavascriptのイベントトリガーとします。ここのクリックで、子要素のulを表示、非表示させます。

css

イベントトリガーのli要素をposition relativeとし、子要素のulをabsoluteとします。(li要素には文字列が入っているため、abusoluteはrelativeに内包されず下方に配置されます。)

一見positionのプロパティはいらないように思いますが、これをしないと要素が浮かないので、メニュー開閉の際に親要素も広がってしまいます。

あとはul要素のmax-heightを0にして、メニューを隠しておきます。同時にoverflow:hiddenで文字列も消しておきます。

javascriptで開閉のアクションをさせるので、開く用のcssを.openで作成しています。

max-heightとvhを使用しているのは、何故か通常のheightと%指定だとtransitionが効かない為です。

javascript

あとはjavascriptでイベント処理をさせるだけです。

liにidを振っているので、それをクリックすればul要素にopenのクラスが追加されるので、メニューが開きます。

また、toggle動作になるので、再度クリックすれば閉じるといった挙動になります。

今回は一応簡易的なレスポンシブに対応させていますが、双方で同じメニューが出るようにしています。

スマホ時はハンバーガーメニューにしたい場合は、冒頭にある過去記事にてまとめていますので、是非参考にしてください。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です