hiraku2
We made 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
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
hogehoge
".offcanvas-right" btn: "#offcanvas-btn-right" fixedHeader: "#header" direction: "right";
From left side
hogehoge
".offcanvas-left" btn: "#offcanvas-btn-left" fixedHeader: "#header" direction: "left";
From both side
hogehoge hogehoge
".offcanvas-left" btn: "#offcanvas-btn-left" fixedHeader: "#header" direction: "left"; ".offcanvas-right" btn: "#offcanvas-btn-right" fixedHeader: "#header" direction: "right";
Specify the width of the Offcanvas-menu in pixels
".offcanvas-right" btn: "#offcanvas-btn-right" fixedHeader: "#header" direction: "right" width: '100px' // default 70%;
open/close methods
var hiraku = ".offcanvas-right" breakpoint: -1 btn: "#offcanvas-btn-right" closeBtn: '.#offcanvas-btn-close' fixedHeader: "#header" direction: "right" width: '100px' // default 70%;hiraku; // open offcanvas;hiraku; // close offcanvas;
open/close events
var hiraku = ".offcanvas-right" breakpoint: -1 btn: "#offcanvas-btn-right" closeBtn: '.#offcanvas-btn-close' fixedHeader: "#header" direction: "right" width: '100px' // default 70%;hiraku;hiraku;
Download
You can download from here.