【徹底解説】5歳でも分かる、アコーディオンメニューの作り方(jQuery編)

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。今回はアコーディオンメニューの作り方を徹底的に解説していきます。

この記事は僕が書いている5歳でも分かるシリーズの1つです。こちらにスライドショーやタブメニューなどの作り方も載っていますのでぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

「htmlはデータの構造」「cssはその見せ方を作るもの」「jsはクラスの付け替えによってその2つを操作するもの」と言う切り分け方を前提に、jQueryのaddClass/removeClass/toggleClassを用いた方法で実装します。

作るものの確認

メニューをクリックしたらサブメニューがさらに展開されるようなメニューです。

index.html
style.css

実装

準備

コードを書き始める前に、ディレクトリ構成の確認とリセットCSSの導入です。

├── index.html
├── resources
│   └── styles
│       ├── destyle.css
│       └── style.css
└── sample.html

上記の形でファイルを配置しましょう。stylesはルートディレクトリ直下でも良いですが、実際にはresourcesの中にimagesフォルダなどと一緒に入っている形が多いのでそのようにしました。またsample.htmlはメニューから遷移する用に一応用意しているだけのものなので、中身は適当で大丈夫です。

destyle.cssというのがリセットCSSで、詳細な説明は省きますが各種タグに初期で当たっている様々な余計なスタイルを打ち消してくれるものです。

今回はこちら(https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css)のものを利用します。こちらのコードをそのままコピーしてdestyle.cssとして上記の場所に配置します。

style.css

見た目を作る

まずは見た目です。各メニューのなかにサブメニューが入る形です。

サブメニューはそれぞれ初期では非表示です。その指定をしておきましょう。

このように、サブメニューの各要素の高さを0にしborderを削除しておきます。visibility: hidden;はdisplay: noneと違って元のレイアウトで確保されていた領域を保持します。今回の場合ではheightは0にしましたがborderの1px × 4つ分の合計4px分が余計な高さとして残ってしまうので削除する必要がありました。

このborderは後ほど用意するアクティブ時のクラスに配置し直します。

また、今回は.SubMenu-Itemに対してクラスの付け替えをすることにより表示させ、メニューの開閉を表現します。

動きをつける

最初に付け替える用のクラスの用意と、ついでにアニメーションの設定もします。

高さを指定し、ボーダーも付けます。これによってメニューが開いたように見せることができます。またopacityの指定でふわっと開くアニメーションを実現します。

それでは動きを付けていきます。まずはjQueryを読み込みます。

続いてコード部分です。

クリックした要素から見て、サブメニューのアイテムを指定するために変わった記述をしています。

next()は隣り合っている次の要素、children()は子要素全てを表します。.Menu-Item-Labelから見ると、.SubMenuが隣り合っている次の要素、.SubMenu-Item全てがその子要素です。

これで目的の要素のクラスを付け替えることができました。

これでアコーディオンメニューの完成です!

まとめ

ということで、アコーディオンメニューの解説でした。

他にもいろんなパーツの解説をしていますので、ぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

【徹底解説】5歳でも分かる、ドロップダウンメニューの作り方

2021年10月20日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください