Navegación de cajón deslizante de rendimiento suave para la aplicación web-SuperSlide. js

Vista prévia

Descripción

SuperSlide. js es una navegación de cajón deslizante (fuera de lienzo) ligera, personalizable y de alto rendimiento diseñada para aplicaciones web modernas.

Más características

• 4 direcciones deslizantes: superior, derecha, izquierda, inferior
• Permite alternar la navegación con eventos de arrastrar y tocar.
• Inserta el contenido principal cuando se activa la navegación.
• Apoya promesas.
• API y eventos útiles.

¿Cómo funciona?

Instale el SuperSlide. js con NPM.

npm install superslide.js

Importe la biblioteca SuperSlide. js.

<script src='/path/to/superslide.js'></script>

Codificar el código HTML para la navegación del cajón.

<div id='menuContainer'>

<button onclick='superslideMenu.close()'>Close</button>

<!-- Menu Items Here -->
</div>

Inserte un enlace de alternancia de menú en el contenido principal.

<div id='myContent'>

<button onclick='superslideMenu.toggle()'>Toggle</button>

<!-- Main content here -->
</div>

Inicializar & activar la navegación del cajón.

window.onload = function(){


myNav = new OSREC.superslide({


slider: document.getElementById('menuContainer'),


content: document.getElementById('myContent')'

});


var openPromise = myNav.open();

console.log(openPromise);

};

Opciones y valores predeterminados:

myNav = new OSREC.superslide({


// slideLeft, slideRight, slideTop, slideBottom

animation: 'slideLeft',


// duration of animation

duration: 0.5,


// enable drag/touch events

allowDrag: true,


// slide the content when the drawer navigation is toggled

slideContent: true,


// allows content interactions

allowContentInteraction: false,


// close on blur

closeOnBlur: false,


// width/height of the drawer navigation

width: '70vw',

height: '100px',


// thresholds

dragThreshold: 70,

openThreshold: 70,

closeThreshold: 20


});

Funciones de devolución de llamada disponibles.

myNav = new OSREC.superslide({


beforeOpen : function () {};

onOpen : function () {};

beforeClose : function () {};

onClose : function () {};

});

API methods.

// open the navigation
myNav.open()

// close the navigation
myNav.close()

// toggle the navigation
myNav.toggle()

// check if is open
myNav.isOpen()

// check if is fully initialised
myNav.ready()

// destroy the navigation
myNav.destroy()