Skip to main content

Swipe меню на JS

Опубликовано: Konkin 01.03.2019 - 00:23
swipe
CSS/HTML/JS
~15мин.
2000
-

Для реализации мобильного меню как у нативного приложения, которое сдвигается и выдвигается, обычно используют библиотеку jQuery. Меня этот способ не устраивает по ряду причин, начиная от скорости загрузки и рендеринга в браузере, заканчивая зависимостями от версии к версии.

Что, если, реализовать тот же эффект меньшими жертвами, не теряя производительность при построение DOM, на нативном JavaScript?

Принцип работы

Суть решения заключается в том, что родительскому подвешиваем глобальный обработчик события:

<body ontouchmove='swipe(event)'>

Затем, реализуем функцию:

function swipe(event) {
        // Логика обработки события...
}

С помощью метода Math.floor(screen.width), возвращающего ширину экрана, задаем условие, при котором, если координата по оси Х меньше значения screen.width, дочернему элементу (блок который будет выдвигаться), задаем левый отступ за область видимости экрана:

p1.style.marginLeft = '-100%';

иначе:

p1.style.marginLeft = '0px';

Результат и реализацию можно посмотреть на Code Pen, зайдя с мобильного устройства или использовать режим адаптивного просмотра в веб-инспекторе с компьютера.