応用 Drawer Menu（更新中） - user000422/0 GitHub Wiki

改善点 … ボタン消えない方が良い（押し戻しが位置替えなくて楽

<!-- html -->
<i class="material-icons" id="drawer-menu-btn">menu</i> <!-- ドロワーメニューボタン -->

<nav id="drawer-menu" class="drawer-menu">
<!-- 内容 -->
</nav>
<div id="drawer-overlay" class="drawer-overlay"></div>
/* css */
.drawer-menu {
  width: 70%;
  height: 100vh;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: -70%;
  z-index: 3;
  transition: 0.4s;
}

.drawer-overlay {    
  width: 100%;
  height: 100vh;
  background-color: #000;
  opacity: 0.6;
  position: fixed;
  top: 0;
  z-index: 2;
  visibility: hidden;
  transition: 0.4s;
}
// javascript
const DRAWER_BTN = document.getElementById('drawer-menu-btn');
const DRAWER_OVERLAY = document.getElementById('drawer-overlay');
const DRAWER_MENU = document.getElementById('drawer-menu');

// ドロワーメニューを開く
DRAWER_BTN.addEventListener('click', () => {
  DRAWER_BTN.style.visibility ='hidden';
  DRAWER_MENU.style.left ='0%';
  DRAWER_OVERLAY.style.visibility ='visible';
},);

// ドロワーメニューを閉じる
DRAWER_OVERLAY.addEventListener('click', () => {
  DRAWER_BTN.style.visibility ='visible';
  DRAWER_MENU.style.left ='-70%';
  DRAWER_OVERLAY.style.visibility ='hidden';
},);

// スワイプ処理
function drawerMenuSwipe() {
  let start_x; // タッチ開始X軸座標
  let move_x; // スワイプ時x軸座標
  const dist = 150; // ドロワーメニューを閉じる判定最低距離（px）

  // タッチ開始時座標取得
  DRAWER_MENU.addEventListener('touchstart', (event) => {
    event.preventDefault();
    start_x = event.touches[0].pageX;
  },);

  // スワイプ時座標取得
  DRAWER_MENU.addEventListener('touchmove', (event) => {
    event.preventDefault();
    move_x = event.changedTouches[0].pageX;

    // スワイプ距離による、ドロワーメニューの表示制御
    if(move_x < start_x) {
      const w = window.innerWidth;
      // （現在タッチ座標 / 画面幅 * 100） - （ドロワーメニュー幅 / 画面幅 * 100）
      DRAWER_MENU.style.left = Math.round(move_x / w * 100 - DRAWER_MENU.offsetWidth / w * 100) + '%';
    }
  },);

  // スワイプ終了後イベント
  DRAWER_MENU.addEventListener('touchend', (event) => {
    if(start_x > move_x && start_x > move_x + dist) {
      DRAWER_BTN.style.visibility ='visible';
      DRAWER_MENU.style.left ='-70%';
      DRAWER_OVERLAY.style.visibility ='hidden';
    }else{
      DRAWER_MENU.style.left ='0%';
    }
  },);
}
drawerMenuSwipe();
⚠️ **GitHub.com Fallback** ⚠️