Форум

samdo · #1 (**permalink**) 30.11.2024, 16:31

Приветствую! В мобильной версии сайта есть меню, которое скрывается по клику на кнопку закрыть. Подскажите, плиз, что добавить в код, чтобы меню закрывалось еще и по свайпу. Заранее спасибо!

<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>

function openNav() {
    document.getElementById("mySidenav").style.left = "0";
  }
    function closeNav() {
  document.getElementById("mySidenav").style.left = "-281px";
  }

voraa · #2 (**permalink**) 30.11.2024, 20:52

Сам по себе свайп не является событием - это последовательность событий.
Надо поискать какую-нибудь библиотеку, которая может воспринимать такие события, как свайп - тут и нажатие на экран, движение, отпускание экрана и все это с учетом скорости.

Какую то простую реализацию можно тут посмотреть
https://web3r.ru/swipe-event

samdo · #3 (**permalink**) 01.12.2024, 08:24

Ну... я, перед тем как здесь написать, гуглил варианты, пробовал, но всё не рабочее (то, что по ссылке, кстати, тоже

), поэтому и решил обратиться к профи)

рони · #4 (**permalink**) 01.12.2024, 09:17

samdo,
медитировать тут https://javascript.ru/forum/misc/854...tml#post553049

строки 14 - 19 заменить на закрытие вашего меню, направление swap уточнить строку 12.

samdo · #5 (**permalink**) 02.12.2024, 18:57

Сообщение от рони

samdo,
медитировать тут https://javascript.ru/forum/misc/854...tml#post553049

строки 14 - 19 заменить на закрытие вашего меню, направление swap уточнить строку 12.

Спасибо! Но моё незнание js не позволяет модифицировать этот код под моё меню

Поэтому и обратился к вам за помощью.

рони · #6 (**permalink**) 02.12.2024, 21:44

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>

samdo · #7 (**permalink**) 03.12.2024, 07:21

Рони, большущее СПАСИБО! Работает.

voraa · #8 (**permalink**) 03.12.2024, 18:02

рони,
Вот, например, у меня на ноуте это работать не будет.
На ноуте стоит обычная винда, но экран с тачскрином. На десктопных версиях браузеров нет событий touch. Есть только mouse и pointer.
Touch только в мобильных версиях, а pointer есть везде.

рони · #9 (**permalink**) 03.12.2024, 20:12

voraa,
понятно, может будет желание и время предложить свой вариант для pointer?

voraa · #10 (**permalink**) 03.12.2024, 22:49

Сообщение от рони

voraa,
понятно, может будет желание и время предложить свой вариант для pointer?

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <style type="text/css">
        body {
            position: relative;
        }

        .top-menu {
            position: absolute;
            touch-action: none;
        }
    </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("pointerdown", (event) => {
            let target = event.target;
            if (target = target.closest('.top-menu')) {
                touch_y = event.clientY;
                touch_x = event.clientX;
            }
        })
        document.addEventListener("pointerup", (event) => {
            let target = event.target;
            if (target = target.closest('.top-menu')) {
                let swap = (Math.abs(touch_y - event.clientY) > 3 || Math.abs(touch_x - event.clientX) > 3)
                if (swap) {
                    closeNav()
                }
            }
        })
    </script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript