スワイプで開くハンバーガーメニュー【JavaScript/jQuery】
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);
}