【jQuery初心者】アコーディオンメニュー:クリックでの開閉制御ボタンの作り方の基本

man

困ってる人

アコーディオンメニューって一体どうやって作るんだろう?


こんにちは、よろと申します。

本日は、アコーディオンメニューの作り方という事で、

今回作るのは、こんな感じのもので、ボタンをクリックする度にメニューが開閉するタイプのもの。


ただ、ボタンの見た目とかは適当なので、もしデザインの変更をしたいといった場合は、

CSS部分を編集する必要が出てくるので、今回は簡単に、どんな感じにすれば作れるか?といった簡単な説明だけ。

今回使うのは、

・HTML
・CSS
・jQuery

この3つ。

【jQuery初心者】アコーディオンメニュー:クリックでの開閉制御ボタンの作り方の基本

という事で、まずはHTML部分から。

次にCSS部分。

そして最後に、jQuery部分

アコーディオンメニュー:それぞれのファイルの説明を簡単に解説

index.html

HTMLファイル内の、

ここで、jQueryを読み込む設定に。

style.css

CSS部分に関しては、

.accordion {} ここで全体的なメニューのサイズ

.accordion-btn {} ここでボタンの色や形など

ul, li, a {} ここでメニューを開いた時のボタンの中身

.accordion ul {}display: none; にする事で、最初はボタンを隠す設定に

そして、ボタンの開閉の処理の内容は「script.js」の中に書いていく。

.accordionをクリックすると、

.accordionulが、.slideToggle(スライドで開閉されるという意味合い)


今回、ファイルの階層は、

・index.html
・style.css
・script.js

こんな感じで、同じ場所に全てのファイルを置いている。

説明が適当過ぎて申し訳ないけど、今回はこれで終わり。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール