Untitled

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> -->

  </head>
  <body class="drawer drawer--left">
    <header role="banner">
      <button type="button" class="drawer-toggle drawer-hamburger">
        <span class="sr-only">toggle navigation</span>
        <span class="drawer-hamburger-icon"></span>
      </button>
      <nav class="drawer-nav" role="navigation">
        <ul class="drawer-menu">
          <li><a class="drawer-brand" href="#">スライドメニュー</a></li>
          <li><a class="drawer-menu-item" href="#">メニュー１</a></li>
          <li class="drawer-dropdown"><a class="drawer-menu-item" href="#" data-toggle="dropdown">メニュー２ <span class="drawer-caret"></span></a>
            <ul class="drawer-dropdown-menu">
              <li><a class="drawer-dropdown-menu-item" href="#">ドロップ１</a></li>
              <li><a class="drawer-dropdown-menu-item" href="#">ドロップ２</a></li>
              <li><a class="drawer-dropdown-menu-item" href="#">ドロップ３</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>
    <main role="main">
    </main>

    <script>
      $(document).ready(function() {
    $('.drawer').drawer();
      });
    </script>
  </body>

</html>