hiraku.js - Offcanvas Menu Plugin made with love by appleple

Demo

Press to open the offcanvas menu

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.

Quick start

Using CDN

In addition to downloading and loading CSS and JS files,
you can easily start by using CDN.

Add the following description in the <head> tag of the web page you want to use hiraku.

<link rel="stylesheet" href="https://unpkg.com/hiraku@latest/css/hiraku.min.css">
<script src="https://unpkg.com/hiraku@latest/js/hiraku.min.js"></script>

Using npm

npm install hiraku --save

Can bundle with Webpack/Browserify

import Hiraku from 'hiraku';
new Hiraku('.js-hiraku');

Options

Some options are available when making new instances like below.

new Hiraku('.js-hiraku', {
  width: '70%'
});

name	default	description
breakpoint	-1 (px)	When to enable offcanvas feature
btn	.js-hiraku-offcanvas-btn	Open offcanvas menu When this btn is clicked
direction	right	Open Offcanvas-menu from left or right
closeBtn	.js-hiraku-close-btn	Close offcanvas menu when this btn is clicked
fixedHeader	.js-hiraku-fixed-header	If your site has a fixed-header then you have to specify the selector
width	70%	offcanvas menu width

Methods

Some methods are available with instances like below

const hiraku = new Hiraku('.js-hiraku', {
  width: '70%'
});
hiraku.open(); // open offcanvas menu
hiraku.close(); // close offcanvas menu

Events

Some event-listeners are available with instances like below

const hiraku = new Hiraku('.js-hiraku', {
  width: '70%'
});
hiraku.on('open', () => { // when offcanvas menu is opened
  // some functions here
});
hiraku.on('close', () => { // when offcanvas menu is closed
  // some functions here
})

View on GitHub

hiraku was developed by @appleplecom and is open source (MIT license) on GitHub.
Please send us feedback, requests, bug reports and pull requests!

If you like it, please press Star ;)

GitHub page