Step By Work

スワイプで開くハンバーガーメニュー【JavaScript/Jquery】

上杉 洋 Hiroshi Uesugi

Date: 2023.01.27
Update: 2023.01.27

Web制作のコーディングでスワイプで開く仕様のハンバーガーメニューを作成する必要があったので共有します

ポイントは

  • タッチした座標
  • スワイプした距離
  • タッチを離した座標

がわかればなんでも応用が効くと思います。

サンプル

※残念ながらtouchイベントにバインドしているので、マウス操作では動きません

コード

$("button").on("touchstart", start_check);
$("button").on("touchmove", move_check);
$("button").on("touchend", end_check);
let moveX, posiX;
//70px以上のスワイプでメニューが吸着する
let threshold = 70;
function start_check(event) {
  posiX = getX(event);
  moveX = '';
}
function move_check(event) {
  $('header').css({
    'left': getX(event) - 30 + 'px',
    'transition': 'none',
  })
  if (posiX - getX(event) > threshold) {
    moveX = "left";
  }
  else if (posiX - getX(event) <= -threshold) {
    moveX = "right";
  } else {
    moveX = "";
  }
  return false;
}
function end_check(event) {
  if (moveX == "left") {
    $('header').addClass('is-open')
  }
  else if (moveX == "right") {
    $('header').removeClass('is-open')
  }
  else {
  }
  $('header').css({
    'left': '',
    'transition': '',
  })
}

function getX(event) {
  return (event.originalEvent.touches[0].pageX);
}