Menú deslizante para dispositivos móviles en Vanilla JavaScript-toque de deslizamiento lateral

Vista prévia

Descripción

Un plugin Vanilla de JavaScript que se utiliza para crear un menú lateral fuera de lienzo para dispositivos móviles que admite eventos de deslizamiento táctil.

Funcionamiento

Incluya Touch-Sideswipe. CSS y Touch-Sideswipe. js en la página HTML.

<link rel="stylesheet" href="touch-sideswipe.css">
<script src="touch-sideswipe.js"></script>

Cree el menú lateral fuera del lienzo.

<div id="touchSideSwipe" class="touch-side-swipe">

<ul>


<li><a href="#">Nav Item 1</a></li>


<li><a href="#">Nav Item 2</a></li>


<li><a href="#">Nav Item 3</a></li>


...

</ul>
</div>

Crea una nueva instancia del menú de deslizamiento lateral táctil y listo.

var touchSideSwipe = new TouchSideSwipe();

Opciones predeterminadas para la configuración del menú deslizante del lado táctil.

var touchSideSwipe = new TouchSideSwipe({



// container element


elementID: 'touchSideSwipe',



// width and height


elementWidth: 400, //px


elementMaxWidth: 0.8, // *100%


sideHookWidth: 44, //px



// animation speed in seconds


moveSpeed: 0.2,



// opacity of background


opacityBackground:



// in pixels


shiftForStart: 50,



// max width of window


windowMaxWidth: 1024,



 });

Abra/cierre la navegación manualmente con los siguientes métodos de API:

// open
touchSideSwipe.tssOpen()

// close
touchSideSwipe.tssClose()

Registro de cambios

09/20/2018

• arreglo: la API no funciona cuando el ancho de la ventana > windowMaxWidth (y agrega el mensaje tssOpen (Touch-Sideswipe) no se utiliza cuando el ancho interno de la ventana > 1024px (la opción real windowMaxWidth). Por favor, agregue la condición aquí.)
• solución: al deslizar hacia la izquierda mientras el menú está cerrado, todo el menú desaparece y el can'b se puede traer de vuelta a menos que se actualice.

06/03/2018

• agregar funciones de llamada de API tssClose y tssOpen