jQueryを使って、アコーディオンメニューを設置する方法を紹介いたします。
アコーディオンメニューというのは、クリックやタップ(スマートフォン)でアコーディオンのように開閉するメニューのことです。
これだけ聞いてもわかりにくいと思うので、簡単なデモページを用意しました。こちらで動きをチェックしてみていただければと思います。
このデモページに設置したアコーディオンメニューをもとに解説していきます。
ステップ1. メニューリストのマークアップ
まずは、HTMLで入れ子のリストを作成します。
<ul class="acordion"> <li><span class="trigger none-submenu">メニュー1</span> <ul class="submenu"> <li><a href="">サブメニュー1</a></li> <li><a href="">サブメニュー2</a></li> <li><a href="">サブメニュー3</a></li> <li><a href="">サブメニュー4</a></li> <li><a href="">サブメニュー5</a></li> <li><a href="">サブメニュー6</a></li> </ul> </li> <li><span class="trigger none-submenu">メニュー2</span> <ul class="submenu"> <li><a href="">サブメニュー1</a></li> <li><a href="">サブメニュー2</a></li> <li><a href="">サブメニュー3</a></li> <li><a href="">サブメニュー4</a></li> <li><a href="">サブメニュー5</a></li> <li><a href="">サブメニュー6</a></li> </ul> </li> <li><span class="trigger none-submenu">メニュー3</span> <ul class="submenu"> <li><a href="">サブメニュー1</a></li> <li><a href="">サブメニュー2</a></li> <li><a href="">サブメニュー3</a></li> <li><a href="">サブメニュー4</a></li> <li><a href="">サブメニュー5</a></li> <li><a href="">サブメニュー6</a></li> </ul> </li> </ul>
親となるメニューにはtriggerというクラスを、子となるサブメニューにはsubmenuというクラスを付与しておきます。
ステップ2. jQueryのロードとスクリプトの記述
続いて、jQueryのロードとスクリプトの記述です。コードを記述する場所はどこでもいいですが、デモページでは</body>の直前に記述しています。
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$(".submenu").css("display","none");
$(".trigger").click(function(){
if($("+.submenu",this).css("display")=="none"){
$(this).addClass("active-submenu");
$(this).removeClass("none-submenu");
$("+.submenu",this).slideDown("normal");
}else{
$(this).removeClass("active-submenu");
$(this).addClass("none-submenu");
$("+.submenu",this).slideUp("normal");
}
});
});
</script>
jQueryはダウンロードしてサーバー上に設置してもOKです。
4行目でクリックやタップをした時に表示させるサブメニューのクラスを指定します。ここで、デフォルトの状態では表示されないようにしています。
5行目では、親となるメニューのクラスを指定します。triggerというクラスがクリックもしくはタップされたら、submenuというクラスを表示させるという動きになります。
さらに、7行目と8行目では、親メニューにactive-submenuというクラスを追加し、none-submenuというクラスを除去しています。
クリック/タップしていない時はnone-submenuというクラスで、クリック/タップするとactive-submenuというクラスに切り替わります。これは親メニューの横に表示させる矢印を変更するための記述です。必要なければスクリプトから削除しても大丈夫です。これと逆の動きを11行目と12行目で行っています。
なお、このスクリプトはLIGブログの「スマホサイトに入れると使いやすくなる！おすすめjQuery4選！」という記事を参考に、少しカスタマイズしています。
ステップ3. スタイルの変更
ここまでできたら、とりあえずアコーディオンメニューは機能します。ですが、そのままでは見た目もよくないし、クリック/タップできるメニューなのかどうかがわかりにくいです。アコーディオンメニューらしく、CSSで見た目を整えましょう。
参考までにデモページのCSSを載せておきます。
li{
list-style: none;
cursor: pointer;
}
ul.acordion{
background: #f5f5f5;
border-right: solid 1px #808080;
border-left: solid 1px #808080;
margin: 15px;
padding: 0;
}
ul.acordion li {
border-bottom: solid 1px #808080;
}
ul.acordion li:first-child {
border-top: solid 1px #808080;
}
ul.acordion li ul {
margin: 0;
padding: 0;
border: none;
}
ul.acordion li ul li {
background: #fff;
}
ul.acordion li ul li:last-child{
border-bottom: none;
}
ul.acordion li ul li a {
color: #696969;
display: block;
padding: 10px;
text-decoration: none;
}
ul.acordion li .none-submenu {
background: url(trigger-arrow.png) no-repeat 98% 50%;
background-size: 2%;
display: block;
padding: 15px;
}
ul.acordion li .active-submenu {
background: url(triggeractive-arrow.png) no-repeat 98% 50%;
display: block;
padding: 15px;
}
@media only screen and (max-width: 600px) {
ul.acordion li .none-submenu{ background: url(trigger-arrow.png) no-repeat 96% 50%; }
ul.acordion li .active-submenu{ background: url(triggeractive-arrow.png) no-repeat 96% 50%; }
}
とりあえず上記をコピーして、細かい点はカスタマイズしていくのが楽だと思います。
あとがき
アコーディオンメニューは、PCサイトよりもスマートフォンサイトの方が使われますね。
参考になれば幸いです。