Touch-compatible OFF-Canvas menu-SwipeMenu

Vista prévia

Descripción

SwipeMenu es una biblioteca JavaScript muy pequeña para crear un menú lateral fuera de lienzo que admita eventos de deslizamiento táctil. No se requiere 3ª dependencia. Pulse o haga clic en el botón de disparo o deslice la pantalla para alternar el menú.

Funcionamiento

Cargue la hoja de estilo swipemenu. CSS en la sección Head para que el estilo del menú fuera del lienzo.

<link rel="stylesheet" href="dist/swipemenu.css">

Cargue la biblioteca de JavaScript al final del documento para reducir el tiempo de carga de la página.

<script src="dist/swipemenu.js"></script>

El HTML para el menú fuera del lienzo.

<div id="menu" class="menu">

<div class="menuLista">



<h3 class="menuLista__title">Options</h3>



<nav class="menuLista__nav">





<a href="#a"><span>Item A</span></a>





<a href="#b"><span>Item B</span></a>





<a href="#c"><span>Item C</span></a>



</nav>

</div>
</div>

Cree un botón de desencadenador para alternar el menú fuera del lienzo manualmente.

<main>

<h1 id="hamburguer" class="hamburguer" data-method="add">☰</h1>
</main>

El JavaScript para activar el menú fuera del lienzo.

var swipeMenu = new SwipeMenu('#menu');
var hamburguer = document.querySelector('#hamburguer');
var obfuscator = document.querySelector('#obfuscator');

function onToggle(event, method) {


var m = event ? event.currentTarget.dataset.method : method || 'remove';


swipeMenu.menu.classList[m]('menu--open');


obfuscator.classList[m]('obfuscator--visible');
}

hamburguer.addEventListener('click', onToggle);
obfuscator.addEventListener('click', onToggle);
swipeMenu.ee.on('trigger', function(method) {


onToggle(null, method);
});