クリックやタップで開閉するアコーディオンメニューを設置する方法

クリックやタップで開閉するアコーディオンメニューを設置する方法

クリックやタップで開閉するアコーディオンメニューを設置する方法

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サイトよりもスマートフォンサイトの方が使われますね。

参考になれば幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です