先日「【CSS】CSSだけで作るアコーディオンメニュー」という記事を書きましたが、お役に立てたようで、意外とページビューも良くてありがたい限りです。今回はそれにあやかってせっかくなのでjQueryとCSSで作るアコーディオンメニューもやっていきたいと思います。
どちらの方法でも問題はありませんが、テクニックの引き出しは多いに越したことはないですからね。ちなみに私はこっちのjQueryとCSSで作る派です。
合わせて読みたい
Contents
アコーディオンメニューとは
今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。
前回のCSSのみのアコーディオンメニューとの違い
前回のCSSのみのアコーディオンメニューの場合は、まずチェックボックスを「display:none」にして画面上には表示されない状態で配置します。そして、チェックボックスのチェックがあるかないかでメニューの表示・非表示の切り替える、というやり方でした。
自分で書いておいてあれですが、クリックのフラグとして非表示のチェックボックスを使うのがなんだかなぁと思います。ですのでよりシンプルに、jQueryで直接アコーディオンメニューの開閉操作をしていきます。
ベースのHTML・CSS・jQuery
まずはデモをご覧ください。
HTML
メニュー部分以外は割愛していますが、jQueryで操作するので下記の記事も参考にjQuery本体を読み込んでおいてください。
<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」と同じくクラスを削除します。これでアイコンの切り替えができました。
まとめ
今回は「jQueryとCSSで作るアコーディオンメニュー」をやってみました。ポイントとしては、なるべく無駄を減らして、自分のスキルに見合ったテクニックを身につけていくことです。
冒頭のとおり、引き出しは多ければそれに越したことはないので、今までやっていなかったことにもチャレンジして経験値を上げていきましょう。前回の記事と比較してもらって違いを確認するのも面白いと思います。
合わせて読みたい
それでは良いWEBデザイン日和を！Have a nice WEBDESIGNDAY!
