Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/appleple/hiraku
jQuery Offcanvas Menu Plugin
https://github.com/appleple/hiraku
javascript jquery offcanvas-menu
Last synced: about 1 month ago
JSON representation
jQuery Offcanvas Menu Plugin
- Host: GitHub
- URL: https://github.com/appleple/hiraku
- Owner: appleple
- License: mit
- Created: 2016-10-24T11:48:59.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-02T02:17:00.000Z (over 6 years ago)
- Last Synced: 2024-04-14T23:59:38.422Z (8 months ago)
- Topics: javascript, jquery, offcanvas-menu
- Language: JavaScript
- Homepage: https://appleple.github.io/hiraku/
- Size: 12.3 MB
- Stars: 75
- Watchers: 15
- Forks: 16
- Open Issues: 7
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# hiraku.js - jQuery Offcanvas Menu Plugin
## This repository has already been deprecated. consider using the new version of hiraku
https://github.com/appleple/hiraku2
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
```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
$(".offcanvas-right").hiraku({
btn: "#offcanvas-btn-right",
fixedHeader: "#header",
direction: "right"
});
```
### From left side
```html
- hogehoge
```
```js
$(".offcanvas-left").hiraku({
btn: "#offcanvas-btn-left",
fixedHeader: "#header",
direction: "left"
});
```
### From both side
```html
- hogehoge
- hogehoge
```
```js
$(".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
```css
.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.
```css
.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](http://github.com/appleple/hiraku/archive/master.zip)
## Github
[hiraku.js on Github](http://github.com/appleple/hiraku)