どうも、ジャングルオーシャンのミケです。
今日はjQueryで実装するアコーディオンメニューのご紹介だよ。
簡単すぎてあっという間に実装できてしまうので
「HTMLとCSSはわかるけどjQueryってなんだかとっつきにくいな～」「jQueryってなに？JavaScriptのらいぶらり？は？」
と思ってるそこのあなた！ぜひ見ていってね！
ではいってみよう！
アコーディオンメニューとは
アコーディオンメニューってなんだよって人の為に説明するね。
クリックやタップをするとうにょ〜んと中身が出てきて
もう一度クリックやタップをするとしゅ〜んと中身が閉じていく機能のことだよ。
Webサイトでよく見かけるアニメーションだよね。
要素が多くてごちゃごちゃしがちなデザインを収納するのによく使われるよね。
アコーディオンメニューのメリット・デメリットはこちらの記事を参考にしてみてね。
具体的なイメージは用意したサンプルデモページを見てみてね。
ファイルのダウンロードはこちら
※CSSで色分けしているので不要な色は適宜削除してご使用ください。
jQueryを読み込む
アコーディオンメニューを早く実装させたい！っていう気持ちはわかるけど
まずはjQueryを読み込もう！
jQueryを読み込む方法を2つ紹介するので好きな方で導入してみてね。
ファイルをダウンロードして導入する
jQueryの本体を公式サイトからダウンロードしてね。
ダウンロードが完了したらそのファイルをHTMLファイルにscriptタグで読み込もう！
ダウンロードができたらファイルを読み込ませるコードを書こう！
CDNを使って導入する
ダウンロードをしなくてもCDNを使って導入することもできるよ。
以下のコードを記述してもOKだよ！
記事公開時点でのjQueryのバージョンを読み込ませているから
バージョンは公式サイトで確認して修正してね。
jQueryの読み込みが完了したら
いよいよjQueryでアコーディオンメニューを実装していくよ！
用意したサンプルデモを見ながら解説していくね。
サンプルデモの解説
1.複数開閉できる
See the Pen
by mike (@michelangelojo)
on CodePen.
2.一個開けると他は閉じる
See the Pen
accordion2 by mike (@michelangelojo)
on CodePen.
3.一番目を開けておく（複数開閉できる）
See the Pen
by mike (@michelangelojo)
on CodePen.
4.一番目だけ開けておく（一個開けると他は閉じる）
See the Pen
by mike (@michelangelojo)
on CodePen.
5.コンテンツに閉じるボタン追加（複数開閉できる）
See the Pen
by mike (@michelangelojo)
on CodePen.
6.コンテンツに閉じるボタン追加（一個開けると他は閉じる）
See the Pen
by mike (@michelangelojo)
on CodePen.
7.多階層のメニュー
See the Pen
by mike (@michelangelojo)
on CodePen.
hideは閉じる、toggleは開いたり閉じたりする。
8.横に開くアコーディオンメニュー
See the Pen
by mike (@michelangelojo)
on CodePen.
hideは閉じる、toggleは開いたり閉じたりする。
9.横に開くアコーディオンの中に縦に開くアコーディオン
See the Pen
by mike (@michelangelojo)
on CodePen.
.accordion9 liの中のp要素が階層毎にあるから区別するためにclassにopen1を追加しているよ。
10.縦に開くアコーディオンの中に横に開くアコーディオン
See the Pen
by mike (@michelangelojo)
on CodePen.
最後に
これでアコーディオンメニューの説明は終わりだよ。
jQueryって難しそうだけどこう見ると意外と簡単だよね。
もっと詳しく知りたい人は
jQueryのリファレンスサイトがあるから確認してみてね。
もし、実装できないとか、おかしいコードとかあれば連絡待ってるよ！
Twitter
@michelgorilla
Facebook
ミケランジェロ
それじゃ、また今度ね！