Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/appleple/hiraku2
Vanilla JavaScript library to make drawer menus
https://github.com/appleple/hiraku2
css es6 javascript npm offcanvas-menu
Last synced: 3 days ago
JSON representation
Vanilla JavaScript library to make drawer menus
- Host: GitHub
- URL: https://github.com/appleple/hiraku2
- Owner: appleple
- License: mit
- Created: 2018-03-05T14:36:58.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-11-01T23:21:30.000Z (about 2 years ago)
- Last Synced: 2024-10-31T00:51:07.906Z (14 days ago)
- Topics: css, es6, javascript, npm, offcanvas-menu
- Language: JavaScript
- Homepage: https://appleple.github.io/hiraku2/
- Size: 1.15 MB
- Stars: 69
- Watchers: 9
- Forks: 2
- Open Issues: 13
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```html
```
## 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
```html
- hogehoge
```
```js
new Hiraku(".offcanvas-right", {
btn: "#offcanvas-btn-right",
fixedHeader: "#header",
direction: "right"
});
```
### From left side
```html
- hogehoge
```
```js
new Hiraku(".offcanvas-left", {
btn: "#offcanvas-btn-left",
fixedHeader: "#header",
direction: "left"
});
```
### From both side
```html
- hogehoge
- hogehoge
```
```js
new Hiraku(".offcanvas-left", {
btn: "#offcanvas-btn-left",
fixedHeader: "#header",
direction: "left"
});
new Hiraku(".offcanvas-right", {
btn: "#offcanvas-btn-right",
fixedHeader: "#header",
direction: "right"
});
```
### Specify the width of the Offcanvas-menu in pixels
```js
new Hiraku(".offcanvas-right", {
btn: "#offcanvas-btn-right",
fixedHeader: "#header",
direction: "right",
width: '100px' // default 70%
});
```
### open/close methods
```js
var hiraku = new Hiraku(".offcanvas-right", {
breakpoint: -1,
btn: "#offcanvas-btn-right",
closeBtn: '.#offcanvas-btn-close',
fixedHeader: "#header",
direction: "right",
width: '100px' // default 70%
});
hiraku.open(); // open offcanvas;
hiraku.close(); // close offcanvas;
```
### open/close events
```js
var hiraku = new Hiraku(".offcanvas-right", {
breakpoint: -1,
btn: "#offcanvas-btn-right",
closeBtn: '.#offcanvas-btn-close',
fixedHeader: "#header",
direction: "right",
width: '100px' // default 70%
});
hiraku.on('open', function(){
// this will be executed when the offcanvas opened
});
hiraku.on('close', function(){
// this will be executed when the offcanvas closed
});
```
## Download
You can download from here.
[Download hiraku.js](http://github.com/appleple/hiraku2/archive/master.zip)
## Github
[hiraku.js on Github](http://github.com/appleple/hiraku2)