モバイルメニュー Step1

JavaScriptによるメニューの開閉

by s_hiroshi

HTML

<header>
  <button id="menu-toggle">メニュー</button>
</header>
<nav id="menu" style="display:none">
  <ul id="menu-list">
    <li class="menu-item">item1</li>
    <li class="menu-item">item2</li>
    <li class="menu-item">item3</li>
  </ul>
</nav>
<main>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel eleifend ante, vestibulum rhoncus lacus. Vivamus nec nunc facilisis, mollis sem nec, congue tortor. Suspendisse at blandit justo. Donec ex dolor, semper rutrum accumsan a, blandit at sem. Sed a leo imperdiet, vehicula magna eget, sodales augue. Ut malesuada fermentum egestas. Aliquam ligula ipsum, pulvinar at risus quis, finibus suscipit mauris. Vestibulum tincidunt libero eu sapien porta pellentesque. Sed sed auctor justo. Duis eu quam ut ex convallis rhoncus ac nec ante. Vivamus tempor ipsum quis aliquam posuere. Proin vulputate est nec eros varius laoreet. Cras tristique dolor diam, nec consequat dolor facilisis a.
  </p>
</main>

SCSS

// 680px以下に適用
@media (max-width: 680px) {
header {
  height: 36px;
  line-height: 36px;
  color: #fff;
  background: #333;
}

#menu {
  position: absolute;
  top: 36px;
  background: #f0f0f0;
  width:100vw;
  height: 100vh;
  

  #menu-list {
    padding: 0 0 0 0.25rem;
    margin: 0;
    border-top: 3px solid #ccc;
  }

  .menu-item {
    margin: 0;
    border-bottom: 1px solid #ccc;
    line-height: 2rem;
    list-style-type: none;
  }
}
}

JavaScript

// メニューの開閉
$("#menu-toggle").on("click", (e) => {
  let status = $('#menu').css("display");
  (status === "none") ? $("#menu").css('display', 'block'): $('#menu').css('display', 'none');
  /* e.isPropagationStopped() */
});

// 開いているときにリスト（ul）以外をクリックしたときはメニューを閉じる
$(document).on('click', function(e) {
  if (($(e.target).attr("id") !== "menu-toggle" &&
    $(e.target).attr("id") !== "menu-list") &&
    ! $(e.target).hasClass("menu-item") &&
    $('#menu').css('display') === 'block') {
       $('#menu').css('display', 'none');
  }
});