先日「【CSS】CSSだけで作るアコーディオンメニュー」という記事を書きました。今回はjQueryとCSSで作るアコーディオンメニューもやっていきたいと思います。
どちらの方法でも問題はありませんが、テクニックの引き出しは多いに越したことはないですからね。ちなみに私はこっちのjQueryとCSSで作る派です。
アコーディオンメニューとは
今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。
前回のCSSのみのアコーディオンメニューとの違い
前回のCSSのみのアコーディオンメニューの場合は、まずチェックボックスを「display:none」にして画面上には表示されない状態で配置します。
そして、チェックボックスのチェックがあるかないかでメニューの表示・非表示の切り替える、というやり方でした。
自分で書いておいてあれですが、クリックのフラグとして非表示のチェックボックスを使うのがなんだかなぁと思います。ですのでよりシンプルに、jQueryで直接アコーディオンメニューの開閉操作をしていきます。
ベースのHTML・CSS・jQuery
まずはデモをご覧ください。
メニュー部分以外は割愛していますが、jQueryで操作するので下記の記事も参考にjQuery本体を読み込んでおいてください。
HTML
<ul class="menu">
<li class="menu__item">
<a class="menu__item__link js-menu__item__link" href="">メニュー1（クリックで開く）</a>
<ul class="submenu">
<li class="submenu__item">
<a href="">サブメニュー1</a>
</li>
<li class="submenu__item">
<a href="">サブメニュー2</a>
</li>
<li class="submenu__item">
<a href="">サブメニュー3</a>
</li>
<li class="submenu__item">
<a href="">サブメニュー4</a>
</li>
</ul>
</li>
※以下省略
</ul>
3行目
「js-menu__item__link」をクリックした際の操作をjQueryで実装していきます。頭に「js-」をつけたクラスも書いているのは、jQueryで操作していることをわかりやすくするためです。
CSS
.menu__item {
background: #5200b7;
color: #fff;
cursor: pointer;
display: block;
margin-bottom: 1px;
position: relative;
}
.menu__item__link {
color: #fff;
display: block;
padding: 1rem;
}
.submenu {
background: #fff;
display: none;
}
.submenu__item {
border-bottom: 1px solid #5200b7;
color: #222;
padding: 1rem;
}
17行目
「submenu」はjQueryで開閉操作するので非表示にしておきます。
jQuery
$(function(){
$('.js-menu__item__link').each(function(){
$(this).on('click',function(){
$("+.submenu",this).slideToggle();
return false;
});
});
});
2行目
「js-menu__item__link」は複数ありますので、「each」内で「$(this)」と書いて、クリックされた「js-menu__item__link」のみに処理が実行されるようにします。
4行目
「js-menu__item__link」がクリックされたタイミングで操作したいのは、その直後の「submenu」ですので、セレクタに「$(‘+.submenu’,this)」と書いています。CSSの＋セレクタと同じで、隣り合っているすぐ直後の要素に適用することができます。
そしてjQueryの「slideToggle」で開閉操作をしています。凝ったアニメーションをしないなら「slideToggle」はめちゃくちゃ便利です。閉じていれば開くし、開いていれば閉じてくれます。
応用編 アイコンで表示・非表示状態をわかりやすく
前回同様、アイコンをつけて表示・非表示の状態をわかりやすくしましょう。アイコンは「Font Awesome」使用します。
head内に下記の1行を追加してFont Awesomeを使えるようにしておきます。
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
ではこちらもまずはサンプルをご確認ください。
HTML
HTMLは一切変更なしです。
CSS
.menu__item {
background: #5200b7;
color: #fff;
cursor: pointer;
display: block;
margin-bottom: 1px;
}
.menu__item__link {
color: #fff;
display: block;
line-height: 60px;
padding: 0 1rem;
position: relative;
}
.menu__item__link:after {
background: #33105f;
content: '\f067';
display: block;
font-family: "Font Awesome 5 Free";
line-height: 60px;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
}
.menu__item__link.on:after {
content: '\f068';
}
.submenu {
background: #fff;
display: none;
}
.submenu__item {
border-bottom: 1px solid #5200b7;
color: #222;
padding: 1rem;
}
8行目〜
「menu__item__link」のafter擬似要素でアイコンを表示するので、その部分のスタイルを追加します。
20行目〜
アコーディオンメニューが開いている時は、この後のjQueryで「on」クラスを付与し、アイコンを変えてわかりわすくします。
jQuery
$(function(){
$('.js-menu__item__link').each(function(){
$(this).on('click',function(){
$(this).toggleClass('on');
$("+.submenu",this).slideToggle()
return false;
});
});
});
4行目
追加したのはこの1行のみです。
CSSでアイコンを切り変えるために、「toggleClass」で「on」を付け外しします。「toggleClass」も便利なメソッドで、指定したクラスがなければ「addClass」と同じくクラスを付与し、すでにあれば「removeClass」と同じくクラスを削除します。これでアイコンの切り替えができました。
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
jQueryとCSSで作るアコーディオンメニューまとめ
今回は「jQueryとCSSで作るアコーディオンメニュー」をやってみました。ポイントとしては、なるべく無駄を減らして、自分のスキルに見合ったテクニックを身につけていくことです。
冒頭のとおり、引き出しは多ければそれに越したことはないので、今までやっていなかったことにもチャレンジして経験値を上げていきましょう。前回の記事と比較してもらって違いを確認するのも面白いと思います。
