jQueryで作る!3階層のアコーディオンメニューの作り方

今回は3階層のアコーディオンメニューをjQueryで作る方法を紹介します。レスポンシブ対応です。

jQueryのコードも簡単なので安心してください。

 

jQueryを読み込む

まずはjQueryを読み込まないと始まりませんね。

以下のコードを<head>内にコピペしましょう。レスポンシブに対応させるためについでにkメディアクエリも書いておきます。

<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

3階層の構造は<ul>のなかに<li>でメニューを作成し、その中にまた<ul>を入れることで入れ子にしています。

入れ子にしたメニューがクリックされた時に表示されるようにします。

<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>サブメニュー1</li>
                <li>サブメニュー2</li>
                <li>サブメニュー3</li>
                <li>サブメニュー4</li>
                <li>サブメニュー5</li>
                <li>サブメニュー6</li>
                <li>サブメニュー7</li>
                <li>サブメニュー8</li>
              </ul>
            </li>
            <li><p class="sub-menu-ttl">ミニメニュー1 </p></li>
            <li><p class="sub-menu-ttl">ミニメニュー2 </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>

 

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%;
}
}

 

jQuery

<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>

 

デフォルトではdisplay: noneで非表示にしておきます。

clickイベントでslideUpさせ、toggleCassでクラスのオンオフを切り替えます。

toggleClassで指定している.openクラスはメニューの表示・非表示を切り替えることができるようCSSで指定されています。

また、openクラスとopenAcdクラスはメニューの表示非表示によって向きを変えるための指定です。