Hiraku.js – jQuery Off-Canvas Menu

Translated from Japanese “Hiraku” means “Open”. This jQuery plugin is yet another solution for an off-canvas menu drawer navigation which is suitable for mobile versions of websites and web apps.

There are many plugins as Hiraku.js that can be used to add an off-canvas navigation but not all of them have the specific features it has.

Plugin features:

• Not affected by dom structure;
• Can be enabled to open both right and left side menus;
• Main canvas is not scrolled, while scrolling Off-Canvas menu;
• Easy to control the movement;
• Accessible for keyboard navigation and screen readers;

How to use:

Installing Hiraku.js is very simple. Here is how you can start using it:

npm

npm install hiraku 

Setup:

<link rel="stylesheet" type="text/css" href="./hiraku.css">
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="./hiraku.js"></script>

Options:

Option

Hiraku.js has following options. Via options, you can control the behavior when you open the Offcanvas-menu. And if you want to change the width of the Offcanvas-menu, you may want to change CSS properties instead of changing the JavaScript.

Demos

From right side

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

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

See the Pen hiraku.js – offcanvas menu on the right side by appleple (@appleple) on CodePen.

From left side

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

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

See the Pen hiraku.js – offcanvas menu on the left side by appleple (@appleple) on CodePen.

From both side

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

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

 

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

See the Pen hiraku.js – offcanvas menu on the both sides. by appleple (@appleple) on CodePen.

For more information about styling and options visit the Hiraku’s GitHub Page.