どうも7noteです。シンプルな押したら開くメニューの作り方。

よく使われる、タップやクリックで開くメニューの作り方です。

作り方

index.html

<ul class="menu">
  <li>
    <p>メニュー1</p>
    <ul class="submenu">
      <li>あああ</li>
      <li>いいい</li>
      <li>ううう</li>
    </ul>
  </li>
  <li>
    <p>メニュー2</p>
    <ul class="submenu">
      <li>えええ</li>
      <li>おおお</li>
      <li>かかか</li>
    </ul>
  </li>
  <li>
    <p>メニュー3</p>
    <ul class="submenu">
      <li>ききき</li>
      <li>くくく</li>
      <li>けけけ</li>
      <li>こここ</li>
    </ul>
  </li>
</ul>

style.css

.submenu {
  display: none;
}
p {
  cursor: pointer;
}

script.js

$(function(){
  $(".menu li p").on("click", function(){                       // .menuのliがクリックされた時
    $(this).next(".submenu").not(':animated').slideToggle();    // クリックされたliの中にある.submenuの表示非表示を切りかえる
  });
});

※jQeryを使用しています。（jQueryって何？という方はこちら）