Hiraku.js – jQuery Off-Canvas Menu

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.

Variable Description
btn Selector of the button to open the Offcanvas-menu
direction Offcanvas-menu from “left” or “right”

Demos

From right side

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

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


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *