Versatile Offcanvas Menu Plugin With Vanilla JavaScript – hiraku2

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