A repository of over 1000 quality jQuery plugins

jQuery hiraku

hiraku is a jQuery Responsive & Drawer plugin.

Created by appleple

“hiraku” means “open” in Japanese. As you can imagine, “offcanvas-menu” is like a drawer and it is often used to create additional space especially for mobile layout.

Not what you're looking for? Click here to view more Responsive & Drawer jQuery plugins

hiraku.js - jQuery Offcanvas Menu Plugin

We made jQuery plugin called hiraku.js so that more people can use Offcanvas-menu functionality which is used in a CMS we make.

You can easily find source code or plugins for Offcanvas-menu via Google by searching with "offcanvas JavaScript", but we can't find any plugins which meet all features that hiraku.js has. That's Why we made it from the scratch.

Feature

  • Not affected by the DOM structure.
  • Enable to open both right and left side menu.
  • Main canvas is not scrolled, while scrolling Offcanvas-menu.
  • Easy to control the movement
  • Accessible for keyboard navigation and screen readers.

Installation

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>

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
fixedHeader Selector of the fixed elements
direction Offcanvas-menu from "left" or "right"

Demo

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>
</button>
<div class="offcanvas-right">
    <ul><li>hogehoge</li></ul>
</div>
$(".offcanvas-right").hiraku({
    btn:"#offcanvas-btn-right",
    fixedHeader:"#header",
    direction:"right"
});

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>
</button>
<div class="offcanvas-left">
    <ul><li>hogehoge</li></ul>
</div>
$(".offcanvas-left").hiraku({
    btn:"#offcanvas-btn-left",
    fixedHeader:"#header",
    direction:"left"
});

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>
</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>
</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"
});

CSS Customize

If you don't want to move the main contents, When opening the Offcanvas-menu.

By default, main contents will be pressed out. But if you want to fix main contents, you will overwrite hiraku.css like below

.js-hiraku-offcanvas-body-right .js-hiraku-header-fixed {
    margin-left: -70%;
}

.js-hiraku-offcanvas-body-left .js-hiraku-header-fixed {
    margin-left: 70%;
}

.js-hiraku-offcanvas-body-right {
    left:0;
}

.js-hiraku-offcanvas-body-left {
    left:0;
}

Specify the width of the Offcanvas-menu in pixels

By default, width of the Offcanvas-menu is 70% of the screen size. But you may want to change the size of the menu when using tablets. Then you can overwrite hiraku.css like below.

.js-hiraku-offcanvas-body-right .js-hiraku-header-fixed {
    margin-left: -210px;
}

.js-hiraku-offcanvas-body-left .js-hiraku-header-fixed {
    margin-left: 210px;
}

.js-hiraku-offcanvas .js-hiraku-offcanvas-sidebar-left {
    margin-left:-210px;
}

.js-hiraku-offcanvas .js-hiraku-offcanvas-sidebar-right {
    margin-right:210px;
}

.js-hiraku-offcanvas .js-hiraku-offcanvas-sidebar {
    width:210px;
}

.js-hiraku-offcanvas-body-left {
    left:210px;
}

.js-hiraku-offcanvas-body-right {
    right:210px;
}

Customize hiraku.css via hiraku.scss

You can change its width by changing the variable on hiraku.scss. You can also change its transition speed with it.

Variable Description
$side-menu-width Width of the Offcanvas-menu (default´╝Ü 70%)
$animation Transition speeed and type (default: 0.3s ease-in-out)

Download

You can download from here.

Download hiraku.js

Github

hiraku.js on Github



  • Alok Rawat

    great thanks.

You might also like these other Responsive & Drawer jQuery Plugins

  • MobileMenu JS

    A jQuery plug-in for responsive web sites. Turns an unordered list nav into a dropdown

  • jQuery Mobile Navigati...

    Brunch skeleton for a jQuery Mobile application using modular routing & screen navigation approach (using push/pop, support for tabs), MV...

  • jQuery Mobile Date Nav...

    This plugin provides a navigation between date range, either by a defined range (week, month and year). Ideal for querying information ac...

License:

MIT License