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

アコーディオンメニューは、メニュー項目が楽器のアコーディオンのように伸びたり縮んだりして表示されるメニューです。 最初にメニューを小さく縮ませて表示させることができるので、表示スペースの小さいスマホ向けのサイト表示におすすめです。

jQueryを使用したアコーディオンメニュー

jQueryを使用するのでまずはjQueryを読み込む。

<script src="jQueryのあるURL"></script>
表示用のHTML記述

<div class="nav_toggle">
    ここをクリック
</div>
<nav class="nav">
<ul class="menu">
<li><a href="リンク先URL">メニュー1</a>
  <ul>
  <li><a href="リンク先URL">子メニュー1</a>
  <li><a href="リンク先URL">子メニュー2</a>
  </ul>
<li><a href="リンク先URL">メニュー2</a>
<li><a href="リンク先URL">メニュー3</a>
</ul>
</nav>
jQuery実行コード用のHTML記述

<script>
$(function() {
    $('.nav_toggle').click(function() {
        $(this).toggleClass('active');
        if ($(this).hasClass('active')) {
            $('.menu').slideDown();
        } else {
            $('.menu').slideUp();
        }
    });
});
$(function () {
  $('.menu li').click(function(e) {
    if (!$(e.target).closest('li a').length) {
    $(this).children('ul').slideToggle();
    e.stopPropagation();
    }
  });
});
</script>
CSS記述

.nav_toggle{
  cursor:pointer;
  background-color: #C6E2FF;
}
.nav ul{
  display:none
  list-style-type:none;
  padding:0
}
.menu li{
  background-color: #FFD1D1;
}
表示例。メニュー1の右側空白辺りをクリックすることで子メニューが表示されます。

TOPへ
戻る