Как сделать открытие меню свайпом вправо, влево, вверх или вниз
Часто нужно сделать так, чтобы можно было открывать менюшки сайта на мобильном телефоне, просто проведя пальцем по экрану (сделав свайп).
Ниже я привожу код (JavaScript), который использован у меня в адаптивном меню. Найден в сети, чуть переделан и точно работает на Андроиде:
var initialPoint;
var finalPoint;
document.addEventListener('touchstart', function(event) {
initialPoint=event.changedTouches[0];
}, false);
document.addEventListener('touchend', function(event) {
finalPoint=event.changedTouches[0];
var xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX);
var yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
if (xAbs > 150 || yAbs > 150) {
if (xAbs > yAbs) {
if (finalPoint.pageX < initialPoint.pageX){
/*СВАЙП ВЛЕВО*/
}
else{
/*СВАЙП ВПРАВО*/
}}
else {
if (finalPoint.pageY < initialPoint.pageY){
/*СВАЙП ВВЕРХ*/
}
else{
/*СВАЙП ВНИЗ*/
}}}}, false);
Где xAbs > 150 || yAbs > 150 - это минимальная продолжительность движения пальцем по экрану, которая нужна для открытия меню. Да, можно поставить любое число, но мне показалось важным - отсекать лишние значения. Мало ли как посетитель листает страницу.
По идее, код универсальный. Достаточно вставить в него вызов любой функции и можно делать что угодно. Листать фотографии, сворачивать их, открывать и закрывать любые меню.
У меня на сайтах код позволяет быстро открывать боковую панель в мобильной версии и сейчас я тестирую сворачивание фотографий.
Единственное, что можно было бы добавить этому коду - это срабатывание только на определенных элементах на экране. Ну и да, свайп - это хорошо, но иногда хочется сделать как в мобильном приложении - чтобы менюшка постепенно вытягивалась пальцем, а после определенного момента сама разворачивалась на всю ширину. Тут есть пара идей, но нужно еще их реализовать и протестировать.
