samdo,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {
position: relative;
}
.top-menu {
position: absolute;
}
</style>
</head>
<body>
<div class="menubar">
<span class="openmenu" onclick="openNav()">
Меню
</span>
</div>
<div id="mySidenav" class="top-menu">
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
<div class="menu-close" onclick="closeNav()">
х
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.left = "0";
}
function closeNav() {
document.getElementById("mySidenav").style.left = "-281px";
}
let touch_y, touch_x;
document.addEventListener("touchstart", (event) => {
let target = event.target;
if (target = target.closest('.top-menu')) {
touch_y = event.changedTouches[event.changedTouches.length - 1].clientY;
touch_x = event.changedTouches[event.changedTouches.length - 1].clientX;
}
})
document.addEventListener("touchend", (event) => {
let target = event.target;
if (target = target.closest('.top-menu')) {
let swap = (Math.abs(touch_y - event.changedTouches[event.changedTouches.length - 1].clientY) > 3 || Math.abs(touch_x - event.changedTouches[event.changedTouches.length - 1].clientX) > 3)
if (swap) {
closeNav()
}
}
})
</script>
</body>
</html>