Versatile jQuery Offcanvas Menu Plugin With jQuery - Hiraku

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

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

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 log:

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.