Versatile Offcanvas Menu Plugin With jQuery - Hiraku

File Size: 58.3 KB
Views Total: 6818
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Versatile Offcanvas Menu Plugin With jQuery - Hiraku

Hiraku is a lightweight yet powerful jQuery plugin used to create off-canvas drawer navigation menu that supports both left and right sides.

Hiraku2 is now available! 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.

More features:

  • Mobile-friendly.
  • Compatical with Twitter's Bootstrap framework.
  • Supports both overlay and push menus.
  • Fully customizable via CSS/SCSS.
  • Prevents the page scroll when the menu is opened.

Basic usage:

1. To use this plugin, you need to load jQuery and the Hiraku plugin's files in your html page. I recommend you to load the slim build of jQuery library to reduce the page load time.

<link rel="stylesheet" href="src/hiraku.css">
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="src/hiraku.js"></script>

2. Create sidebar navigation menus with toggle buttons as follows:

<button class="hiraku-open-btn" id="offcanvas-btn-left" data-toggle-offcanvas="#js-hiraku-offcanvas-1">
  <span class="hiraku-open-btn-line"></span>
  <span class="hiraku-open-btn-line"></span>
  <span class="hiraku-open-btn-line"></span>
</button>
<div class="offcanvas-left">
  <ul><li>hogehoge</li></ul>
</div>

<button class="hiraku-open-btn" id="offcanvas-btn-right" data-toggle-offcanvas="#js-hiraku-offcanvas-1">
  <span class="hiraku-open-btn-line"></span>
  <span class="hiraku-open-btn-line"></span>
  <span class="hiraku-open-btn-line"></span>
</button>
<div class="offcanvas-right">
  <ul><li>hogehoge</li></ul>
</div>

3. Active the plugin with several options.

$(".offcanvas-left").hiraku({
  btn:"#offcanvas-btn-left",
  direction:"left"
});


$(".offcanvas-right").hiraku({
  btn:"#offcanvas-btn-right",
  direction:"right"
});

Change logs:

2018-01-18

  • Bugfix

2018-01-09

  • Bugfix

2017-12-22

  • Bugfix

2017-12-20

  • Added onClose option.

2017-12-12

  • Fix to forcibly close offcanvas by resizing if window size is larger than breakpoint.

2017-12-10

  • Add the possibility to close the off-canvas with escape key

2017-02-21

  • fix flash bug when closing menu

2017-01-23

  • Fix bug when closing menus
  • Add settimeout

2017-01-16

2016-11-29

  • Edit the value of aria-controls so that it becomes id of panel.

2016-11-15

  • update version

2016-11-14

  • cache several variables
  • JS update

2016-11-11

  • add Close Button
  • remove unnecessary code

This awesome jQuery plugin is developed by appleple. For more Advanced Usages, please check the demo page or visit the official website.