スマホに使える！３階層のアコーディオンメニューを作りました！

ホーム
jQuery, Web Design
スマホに使える！３階層のアコーディオンメニューを作りました！

2018.07.31

スマホに使える！３階層のアコーディオンメニューを作りました！

仕事でスマホサイトを作っているのですが、
その際にモックアップとして作ったアコーディオンメニューがありますので、
コードをシェアします。
解説しながら、お伝えできればと思います。
JQueryが少しでも読めると、カスタマイズするのに便利なことを実感しました！
JQueryはかじった程度なのですが、
これがわかると、ちょっとした挙動を変えることができます。
オススメです。

スポンサードリンク

MFI対応とは。
Moblie First Indexの略で、Googleがスマートフォンページのインデックスを主とした方式に変更を行うことをモバイルファーストインデックスと呼びます。　
GOOGLE公式ブログ

アコーディオンメニューの作り方

まずは、デモをご覧ください。
DEMO

挙動を動画にしてみました

カスタマイズさせていただいたサイトはこちらです。
http://php.o0o0.jp/article/jquery-multiaccordion
これにCSS、アコーディオンJSを書き加えた形です。

使用するJQueryコード

GoogleのJqueryスクリプトをHead内に記述します。それから、スマホに対応するためにメディアクエリを記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0"><!--メディアクエリ-->

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width; initial-scale=1.0"><!--メディアクエリ-->

HTML

JQueryで機能しCSSで形を整えるために、各要素にクラスを割り振ります。

<ul class="acMenu">
        <li>
            <dl>
                <dt class="menu-ttl"><i class="fa fa-leaf" aria-hidden="true"></i> メニュー</dt>
                <dd>
                    <ul>
                        <li class="acMenu2">
                            <p class="sub-menu-ttl">メニュー </p>
                            <ul class="acMenu3">
                                <li>サブメニュー１</li>
                                <li>サブメニュー２</li>
                                <li>サブメニュー３</li>
                                <li>サブメニュー４</li>
                                <li>サブメニュー５</li>
                                <li>サブメニュー６</li>
                                <li>サブメニュー７</li>
                                <li>サブメニュー８</li>
                            </ul>
                        </li>
                        <li><p class="sub-menu-ttl">ミニメニュー１ </p></li>
                        <li><p class="sub-menu-ttl">ミニメニュー２ </i></p></li>
                    </ul>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt class="menu-ttl"><i class="fa fa-heart" aria-hidden="true"></i> メニュー</dt>
                <dd>
                    <ul class="acMenu2 menu-link">
                        <li><a href="#non">サブメニュー</a></li>
                        <li><a href="#non">サブメニュー</a></li>
                        <li><a href="#non">サブメニュー</a></li>
                        <li><a href="#non">サブメニュー</a></li>
                    </ul>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt class="menu-ttl"><i class="fa fa-star" aria-hidden="true"></i>メニュー
      </dt>
                <dd>
                    <ul class="acMenu2 menu-link">
                        <li>サブメニュー</li>
                        <li><a href="#non">サブメニュー</a></li>
                        <li><a href="#non">サブメニュー</a></li>
                        <li><a href="#non">サブメニュー</a></li>
                        <li><a href="#non">サブメニュー</a></li>
                    </ul>
                </dd>
            </dl>
            <dl><dt class="menu-ttl">メニュー</dt></dl>
            
              <dl>
                <dt class="menu-ttl"><i class="fa fa-star" aria-hidden="true"></i>サブメニュー
     </dt>
                <dd>
                    <ul class="acMenu2 menu-link">
                        <li>サブメニュー</li>
                        <li><a href="#non">サブメニュー</a></li>
                        <li><a href="#non">サブメニュー</a></li>
                        <li><a href="#non">サブメニュー</a></li>
                        <li><a href="#non">サブメニュー</a></li>
                    </ul>
                </dd>
            </dl>
        </li>
    </ul>

<li>

<dl>

<dd>

<ul>

メニュー

<li>サブメニュー１</li>

<li>サブメニュー２</li>

<li>サブメニュー３</li>

<li>サブメニュー４</li>

<li>サブメニュー５</li>

<li>サブメニュー６</li>

<li>サブメニュー７</li>

<li>サブメニュー８</li>

</ul>

</li>

<li>ミニメニュー１ </li>

<li>ミニメニュー２ </li>

</ul>

</dd>

</dl>

</li>

<li>

<dl>

<dd>

<li><a href="#non">サブメニュー</a></li>

</ul>

</dd>

</dl>

</li>

<li>

<dl>

<dt class="menu-ttl">メニュー

</dt>

<dd>

<li>サブメニュー</li>

<li><a href="#non">サブメニュー</a></li>

</ul>

</dd>

</dl>

<dl>

<dt class="menu-ttl">サブメニュー

</dt>

<dd>

<li>サブメニュー</li>

<li><a href="#non">サブメニュー</a></li>

</ul>

</dd>

</dl>

</li>

</ul>

CSS

ここは、形を整えるためですので、アコーディオンの動きと直接関係があるわけではありません。

.acMenu {width:320px;
margin:0 auto;
border:1px solid #ccc;
border-radius:10px;
padding:0px;
background: #fff;}

.acMenu li {
    list-style: none;
    padding:0px;
}

.acMenu a {text-decoration: none;}

.acMenu li ul {
    padding:0px;
}

.menu-ttl {
    border-bottom: 1px solid #ccc;
    text-align: center;
    padding-bottom: 15px;
    
}

.sub-menu-ttl {
    border-bottom: 1px solid #ccc;
    text-align: center;
    padding-top:15px;
    padding-bottom: 15px;
    background:#DDE9CB;
    margin:0px;
    
}

dd {
    margin:0px;
    
}

.acMenu2 li {
    text-align:center;
}
.acMenu3 {
    text-align: center;
}

.acMenu3 li,.menu-link li {
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
    background: none;
}

.acMenu dt.open {
/*    background: #ccc;*/
    
}

.acMenu dt:after {
    content:"\f078";
    font-family:fontAwesome;
    margin-left:20px;
}

.acMenu dt.open:after {content:"\f077";
    font-family:fontAwesome;
margin-left:20px;}

.sub-menu-ttl:after {
    content:"\f078";
    font-family:fontAwesome;
    margin-left:20px;
}

.sub-menu-ttl.openAcd:after {content:"\f077";
    font-family:fontAwesome;
margin-left:20px;}

@media screen and (max-width:620px){

.acMenu {
    width:100%;
}
}

.acMenu {width:320px;

margin:0 auto;

border:1px solid #ccc;

border-radius:10px;

padding:0px;

background: #fff;}

.acMenu li {

list-style: none;

padding:0px;

}

.acMenu a {text-decoration: none;}

.acMenu li ul {

padding:0px;

}

.menu-ttl {

border-bottom: 1px solid #ccc;

text-align: center;

padding-bottom: 15px;

}

.sub-menu-ttl {

border-bottom: 1px solid #ccc;

text-align: center;

padding-top:15px;

padding-bottom: 15px;

background:#DDE9CB;

margin:0px;

}

dd {

margin:0px;

}

.acMenu2 li {

text-align:center;

}

.acMenu3 {

text-align: center;

}

.acMenu3 li,.menu-link li {

padding-top: 15px;

padding-bottom: 15px;

border-bottom: 1px solid #ccc;

background: none;

}

.acMenu dt.open {

/* background: #ccc;*/

}

.acMenu dt:after {

content:"\f078";

font-family:fontAwesome;

margin-left:20px;

}

.acMenu dt.open:after {content:"\f077";

font-family:fontAwesome;

margin-left:20px;}

.sub-menu-ttl:after {

content:"\f078";

font-family:fontAwesome;

margin-left:20px;

}

.sub-menu-ttl.openAcd:after {content:"\f077";

font-family:fontAwesome;

margin-left:20px;}

@media screen and (max-width:620px){

.acMenu {

width:100%;

}

JQuery

＜head＞内に書きます。

<script>
    function acdMenu() {
        //デフォルトでアコーディオンの中身を非表示
        $(".acMenu dd").css("display", "none");
        $(".acMenu2 ul").css("display", "none");

        //第2階層のアコーディオン　
        $(".acMenu dt").click(function() {
            $(".acMenu dt").not(this).next().slideUp("fast");
            $(this).toggleClass("open").next().slideToggle("fast");
        });

        //第3階層のアコーディオン
        $(".acMenu2 p").click(function() {
            $(this).toggleClass("openAcd").next().slideToggle("fast");
        });
    }

    $(function() {
        acdMenu();
    });
    </script>

function acdMenu() {

//デフォルトでアコーディオンの中身を非表示

$(".acMenu dd").css("display", "none");

$(".acMenu2 ul").css("display", "none");

//第2階層のアコーディオン　

$(".acMenu dt").click(function() {

$(".acMenu dt").not(this).next().slideUp("fast");

$(this).toggleClass("open").next().slideToggle("fast");

});

//第3階層のアコーディオン

$(".acMenu2 p").click(function() {

$(this).toggleClass("openAcd").next().slideToggle("fast");

});

}

$(function() {

acdMenu();

});

</script>

clickすると、slideUpし、
toggleClassは、指定したclassのオン(設定)、オフ(削除)の切り替えを行います。
ここではアコーディオンを開きながら、クラスをふり、閉じるとクラスが消えるという便利なコードです。
openまたは.openAcdというクラスは、開閉する矢印を機能させるために使います。

JQueryの勉強にオススメ

オススメの書籍はこちら

やさしくはじめるWebデザイナーのためのjQueryの学校

posted with カエレバ

高橋のりマイナビ 2012-12-22

Amazon

最後に

いかがでしたか？コードが多めですが、ぜひお試しください。

投稿者プロフィール

mayukou: Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら

プロフィール

mayukou

こんにちは！mayukouと申します。福岡市でハーブティー専門店のデザイナーをしています。デザイナー7年目。海外で活動できる一流デザイナーを目指しています。洋楽好き（特にR&B）。Mac&iPhoneユーザー。AB型です。自分の学んだこと、役に立つことを発信していきたいと思います。よろしくおねがいします。