hiraku.js - jQuery Offcanvas Menu Plugin

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

It is very easy to find source codes 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.

Japanese Document

If you are Japanese, you may want to read the following article instead.

Japanese Document

Features

• Not affected by dom structure.
• Enable to open both right and left side menus.
• 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.

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

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 left side by appleple (@appleple) on CodePen.

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

CSS Customize

By default, main contents will be pressed out. But if you want to fix main contents, you can 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;
}

See the Pen hiraku.js - offcanvas menu with fixed body by appleple (@appleple) on CodePen.

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

See the Pen hiraku.js - offcanvas menu with px specified by appleple (@appleple) on CodePen.

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.

Download

You can download from here.

Download hiraku.js

Github

hiraku.js on Github

Lisence

Code and documentation copyright 2016 the appleple, Inc. Code released under the MIT License

Extra

We made this plugin so that more people can use offcanvas-menu functionality which is used in a system called a-blog cms we make for domestic use.