Versatile Offcanvas Menu Plugin With jQuery - Hiraku
File Size: | 58.3 KB |
---|---|
Views Total: | 6818 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Hiraku is a lightweight yet powerful jQuery plugin used to create off-canvas drawer navigation menu that supports both left and right sides.
Hiraku2 is now available! hiraku2 is the vanilla JavaScript version of the jQuery hiraku plugin that lets you create customizable, off-canvas push menu for mobile and web apps.
More features:
- Mobile-friendly.
- Compatical with Twitter's Bootstrap framework.
- Supports both overlay and push menus.
- Fully customizable via CSS/SCSS.
- Prevents the page scroll when the menu is opened.
Basic usage:
1. To use this plugin, you need to load jQuery and the Hiraku plugin's files in your html page. I recommend you to load the slim build of jQuery library to reduce the page load time.
<link rel="stylesheet" href="src/hiraku.css"> <script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="src/hiraku.js"></script>
2. Create sidebar navigation menus with toggle buttons as follows:
<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>
3. Active the plugin with several options.
$(".offcanvas-left").hiraku({ btn:"#offcanvas-btn-left", direction:"left" }); $(".offcanvas-right").hiraku({ btn:"#offcanvas-btn-right", direction:"right" });
Change logs:
2018-01-18
- Bugfix
2018-01-09
- Bugfix
2017-12-22
- Bugfix
2017-12-20
- Added onClose option.
2017-12-12
- Fix to forcibly close offcanvas by resizing if window size is larger than breakpoint.
2017-12-10
- Add the possibility to close the off-canvas with escape key
2017-02-21
- fix flash bug when closing menu
2017-01-23
- Fix bug when closing menus
- Add settimeout
2017-01-16
- JS & CSS update
2016-11-29
- Edit the value of aria-controls so that it becomes id of panel.
2016-11-15
- update version
2016-11-14
- cache several variables
- JS update
2016-11-11
- add Close Button
- remove unnecessary code
This awesome jQuery plugin is developed by appleple. For more Advanced Usages, please check the demo page or visit the official website.