Author: | appleple |
---|---|
Views Total: | 286 views |
Official Page: | Go to website |
Last Update: | January 30, 2020 |
License: | MIT |
Preview:

Description:
hiraku2 is the vanilla JavaScript version of the jQuery hiraku plugin that lets you create customizable, off-canvas push menu for mobile and web apps.
Features:
- Supports both sides.
- Without any 3rd dependencies like jQuery.
- Accessible.
- Easy to customize.
- Fully responsive and mobile-friendly.
How to use it:
Insert the hiraku2 plugin’s JavaScript and CSS files into the document.
<link rel='stylesheet' href='hiraku.min.css'> <script src='hiraku.min.js'></script>
Create the off-canvas sidebar navigation.
<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>
Create a button to toggle the off-canvas navigation.
<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>
Enable the off-canvas navigation that only displays on small devices (screen size < 767px).
new Hiraku(".js-offcanvas-left", { btn: "js-offcanvas-btn-left", fixedHeader: ".js-fixed-header", direction: "left", breakpoint: 767 });
All default plugin options.
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]' });
Changelog:
v2.1.8 (01/30/2020)
- bugfix
v2.1.6 (08/12/2018)
- fix css to prevent clicking links under overlay unintentionally
v2.1.6 (08/12/2018)
- fix css to prevent clicking links under overlay unintentionally
v2.1.5 (08/09/2018)
- prevent showing offcanvas menu when the page is loaded on IE
- fix css to prevent clicking links under overlay unintentionally
07/10/2018
- can have some close btns for one off-canvas menu