Plugin versátil Offcanvas menu con vanilla JavaScript-hiraku2

Vista prévia

Descripción

hiraku2 es la versión de JavaScript Vanilla de jQuery Hiraku plugin que le permite crear menú Push personalizable y fuera de lienzo para aplicaciones móviles y Web.

Características

• Soporta ambos lados.
• Sin ninguna 3ª dependencia como jQuery.
• Accesible.
• Fácil de personalizar.
• Totalmente responsivo y amigable para móviles.

Funcionamiento

Inserte los archivos JavaScript y CSS del complemento hiraku2 en el documento.

<link rel='stylesheet' href='hiraku.min.css'>
<script src='hiraku.min.js'></script>

Crea la navegación lateral fuera de lienzo.

<div class="sidebar-offcanvas">

<div class="js-offcanvas-left">


<a href="#" class="list-group-item active">Link</a>


<a href="#" class="list-group-item">Link</a>


<a href="#" class="list-group-item">Link</a>


<a href="#" class="list-group-item">Link</a>


<a href="#" class="list-group-item">Link</a>


<a href="#" class="list-group-item">Link</a>


<a href="#" class="list-group-item">Link</a>


<a href="#" class="list-group-item">Link</a>


<a href="#" class="list-group-item">Link</a>


<a href="#" class="list-group-item">Link</a>

</div>
</div>

Cree un botón para alternar la navegación fuera del lienzo.

<button type="button" class="navbar-toggle-left js-offcanvas-btn-left">

<span class="sr-only">Toggle navigation</span>

<span class="hiraku-open-btn-line"></span>
</button>

Habilite la navegación fuera del lienzo que solo se muestra en dispositivos pequeños (tamaño de pantalla < 767px).

new Hiraku(".js-offcanvas-left", {


btn: "js-offcanvas-btn-left",


fixedHeader: ".js-fixed-header",


direction: "left",


breakpoint: 767
});

Todas las opciones predeterminadas del plugin.

new Hiraku(".js-offcanvas-left", {


direction: 'right',


breakpoint: -1,


btn: '.js-hiraku-offcanvas-btn',


btnLabel: 'Menu',


closeLabel: 'Close',


fixedHeader: '.js-hiraku-fixed-header',


focusableElements: 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]'
});

Registro de cambios

v2.1.6 (08/12/2018)

• Fix CSS para evitar hacer clic en los enlaces debajo de superposición involuntariamente

v2.1.5 (08/09/2018)

• evitar mostrar el menú offcanvs cuando la página se carga en IE
• Fix CSS para evitar hacer clic en los enlaces debajo de superposición involuntariamente

07/10/2018

• puede tener algunos btns cercanos para un menú fuera del lienzo