超シンプルなスマホナビの作り方！【プラグイン無・ドロワーナビ・ハンバーガーメニュー】

<div class="drbtn">
</div><!-- drbtn end -->

<nav>
  <div class="drawer">
    <span class="gnav_btn_close"></span>
    <ul>
      <li><a href="****.html">LINK 1</a></li>
      <li><a href="****.html">LINK 2</a></li>
      <li><a href="****.html">LINK 3</a></li>
      <li><a href="****.html">LINK 4</a></li>
    </ul>
  </div><!-- drawer end -->
</nav>

.drbtn {
  /* メニューボタンなど */
  /* お好みで */
  }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #fff;
  transform: translateX(300px);
  transition: 0.3s;
}

.drawer.action {
  width: 100%;
  transform: translateX(0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.action {
  overflow-y: hidden;
}

.drawer ul {
  /* お好みで */
}

.drawer ul li {
  /* お好みで */
}

.drawer ul li a {
  /* お好みで */
}

.drawer .gnav_btn_close {
  /* 閉じるボタンなど */
  /* お好みで */
}

// gnav drawer open
$(function() {
  $('.drbtn').on('click', function () {
    $('.drawer').toggleClass('action');
    $('body').toggleClass('action');
  });
});

// gnav drawer close
$(function() {
  $('.gnav_btn_close').on('click', function () {
    $(window).scrollTop(0);
    $('.drawer').toggleClass('action');
    $('body').toggleClass('action');
  });
});