Перейти к основному содержанию

Swipe menu js

вт, 01.03.2022 - 22:23
KonKin
2 минуты

Кому подходит Swipe menu js

Когда мы строим не просто мобильную версию, а прогрессивное приложение, нам необходимо мобильное меню, которое вызывается свайпом. Обычное, вызываемое по клику, будет неуместно. Люди привыкли, что в приложении можно свайпать. Выдвигать меню слева.

Проблема в том, что в чистом JavaScript, нет обработчика события onswipe. Поэтоу, для распознавания скольжения по экрану, приходится прибегать к разным фремворкам и библиотекам.

То, чем пользовался сам:

Внедряя, к примеру jQuery, сильно увеличивается объем приложения. Для реализации такого простова элемента, как меню, мощности дополнительных библиотек избыточны. Лично я, предпочитаю, не обвешивать сайт излишним кодом.

Responsive menu облегчает жизнь, однако, мне необходимо сделать свайпом не одно а несколько меню. Такоя работа модулю не подвластна.

Остается реализация на чистом JavaScript с обработкой событий ontouchstart, ontouchmove, ontouchend.

swipe menu

Реализация swipe menu на js

Логика простая, два блока стоят рядом.

div

Когда ширина дисплея соответствует мобильному, первый блок уходит за пределы видимости, за левый край экрана. На рисунке выделено красным. На этой области и будет отслеживаться событие свайп.

Меняем свойство css для блока 1, и он перемещается, накладываясь сверху на блок 2, при смахе влево, свойства css меняются и блок 1 возвращаются за область видимости.

Как внедрить?

Всего три шага:

  1. Вставить HTML
  2. Подключить JS-код
  3. Добавить оформление
Хочу уточнить, что это пример реализации свайпа, а не готовое меню. Предполагается, что каждый, самостоятельно добавит ссылки и стилизует под свой дизайн.

<div class="page1" id="page1" 
        ontouchstart="p1hanleTouchStart(event)"
        ontouchmove="p1hanleTouchMove(event)"
        ontouchend="p1hanleTouchEnd(event)"><span class="center">page1</span></div>
<div class="page2" id="page2">page2</div>

.page1 {
       position: absolute;
       top: 0;
       left: 0;
       width: 100vw;
       height:100vh;
       background-color: red;
       z-index: 1;
}

let p1 = document.getElementById('page1');
let startingX;
function p1hanleTouchStart(evt) {
    startingX = evt.touches[0].clientX;
};

function p1hanleTouchMove(evt) {
    let touch = evt.touches[0];
    let change = startingX - touch.clientX;
    if (change < 0) {
        return;
    };

    p1.style.left = '-' + change + 'px';
    evt.preventDefault();
};

function p1hanleTouchEnd(evt) {
    let change = startingX - evt.changedTouches[0].clientX;
    let treshold = screen.width / 3;
    if (change < treshold) {
        p1.style.left = 0;
    } else {
        p1.style.transition = 'all .9s';
        p1.style.left = '-100%';
    }
}

 

Комментарии

Konkin

вт, 01.03.2022 - 20:44

Друзья, я нуждаюсь в обратной связи. Мне необходимо знать, что улучшить для большего удобства. Пожалуйста, дайте знать ваши идеи.
Если возникают сложности по внедрению кода, обязательно, задавайте вопросы.

Добавить комментарий

Ограниченный HTML

  • Допустимые HTML-теги: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Строки и абзацы переносятся автоматически.
  • Адреса веб-страниц и email-адреса преобразовываются в ссылки автоматически.