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

Date:	2023.01.27
Update:	2023.12.02

執筆･監修

上杉洋　Hiroshi Uesugi

1991年生まれ。株式会社ステップバイワーク代表。 2013年に株式会社n.uを設立。 2015年にStep by workとして独立。 2021年株式会社ステップバイワークとして法人化。 HP制作/SEO対策/コンテンツ制作/動画制作/YouTube運用/写真撮/WordPressを全て一人でやります。

Xにポストする

Facebookで共有 B! ブックマークする

コピーする

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);
}

Xにポストする

Facebookで共有 B! ブックマークする

コピーする