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

Swipe menu js

Опубликовано: пт, 02.26.2021 - 18:28
KonKin - автор блога.

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

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

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

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

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

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

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

Скачать: swipe_menu_js

swipe menu

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

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

div

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

div

Делаем прозрачную область, слева, по которой будет производиться свайп.

div

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

div

<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%';
    }
}