Móvil-primer cajón de navegación en vainilla JavaScript-HY-cajón

Vista prévia

Descripción

HY-Drawer es una biblioteca de JavaScript que hace que sea fácil de crear móvil amigable, de alto rendimiento < a href = "https://wikicss.com/tag/drawer-menu/" > navegación cajón para su móvil/escritorio aplicación Web. También se puede implementar como plugin jQuery o componente Web.

Funcionamiento

En este post, vamos a implementar el HY-cajón en JavaScript vainilla. Para los usuarios de jQuery, visite de jQuery HY-Drawer.

<link href="dist/style.css" rel="stylesheet">
<script src="dist/hy-drawer.js"></script>

Codificar la navegación del cajón como estos.

<aside id="drawerEl">

<ul>


<li><a href="#">Home</a></li>


<li><a href="#">CSS Script</a></li>


<li><a href="#">Works</a></li>


<li><a href="#">Portfolios</a></li>


<li><a href="#">Projects</a></li>


<li><a href="#">Contact</a></li>


<li><a href="#">About</a></li>

</ul>
</aside>

Es posible que necesite un elemento de desencadenador para alternar la navegación del cajón.

<a id="menuEl" href="#drawerEl"><span class="sr-only">Menu</span></a>

El JavaScript para activar la navegación del cajón y el elemento desencadenante.

var Drawer = hyDrawer.Drawer;
window.drawer = new Drawer(window.drawerEl, {

// options here
});

window.menuEl.addEventListener('click', function (e) {

e.preventDefault();

window.drawer.toggle();
});

Opciones de configuración disponibles:

window.drawer = new Drawer(window.drawerEl, {


// is opened on page load?

opened: false,


// alignment of the drawer navigation

// left, right

align: 'left',


// the range in pixels from either left or right side of the screen (depending on alignment) from within which the drawer can be drawn

range: [0, 100],


// is in 'persistent' state?

// true = drawer can't be moved with touch events

persistent: false,


// true = call preventDefault on every (touch-)move event, effectively preventing scrolling while sliding the drawer

preventDefault: false,


// in pixels

threshold: 10,


// allows the drawer to be pulled with the mouse

mouseEvents: false


});

API methods.

// toggle the drawer navigation
window.drawer.toggle();

// open the drawer navigation
window.drawer.open();

// close the drawer navigation
window.drawer.close();

Eventos.

window.drawerEl.addEventListener('hy-drawer-init', function (e) {

// Fired after the component has been initialized.

 // The current opened state is provided in the detail field of the event.
});

window.drawerEl.addEventListener('hy-drawer-slidestart', function (e) {

// Fired when the user starts sliding the drawer.

 // Note that this event does not occur on every touch motion, since the user could also be scrolling the page!
});

window.drawerEl.addEventListener('hy-drawer-slideend', function (e) {

// Fired when the user stops sliding the drawer.

// For example, it is always proceeded by a slidestart event.

 // However, it is fired before the drawer starts transitioning towards the next opened state.

// The next opened state is provided in the detail field of the event.
});

window.drawerEl.addEventListener('hy-drawer-transitioned', function (e) {

// Fired after a completed transitioning to the new opened state.

 // The new opened state is provided in the detail field of the event.
});

Registro de cambios

10/11/2018

• 1.0.0-pre. 25