Author: | qwtel |
---|---|
Views Total: | 2,340 views |
Official Page: | Go to website |
Last Update: | October 11, 2018 |
License: | MIT |
Preview:

Description:
hy-drawer is a JavaScript library that makes it easy to create mobile-friendly, high-performant drawer navigation for your mobile/desktop web app. Also can be implemented as jQuery plugin or Web component.
How to use it:
In this post, we’re going to implement the hy-drawer in vanilla JavaScript. For jQuery users, visit jQuery hy-drawer.
<link href="dist/style.css" rel="stylesheet"> <script src="dist/hy-drawer.js"></script>
Code the drawer navigation as these.
<aside id="drawerEl"> <ul> <li><a href="#">Home</a></li> <li><a href="#">CSS Script</a></li> <li><a href="#">Works</a></li> <li><a href="#">Portfolios</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </aside>
You might need a trigger element to toggle the drawer navigation.
<a id="menuEl" href="#drawerEl"><span class="sr-only">Menu</span></a>
The JavaScript to activate the drawer navigation and trigger element.
var Drawer = hyDrawer.Drawer; window.drawer = new Drawer(window.drawerEl, { // options here }); window.menuEl.addEventListener('click', function (e) { e.preventDefault(); window.drawer.toggle(); });
Configuration options available:
window.drawer = new Drawer(window.drawerEl, { // is opened on page load? opened: false, // alignment of the drawer navigation // left, right align: 'left', // the range in pixels from either left or right side of the screen (depending on alignment) from within which the drawer can be drawn range: [0, 100], // is in 'persistent' state? // true = drawer can't be moved with touch events persistent: false, // true = call preventDefault on every (touch-)move event, effectively preventing scrolling while sliding the drawer preventDefault: false, // in pixels threshold: 10, // allows the drawer to be pulled with the mouse mouseEvents: false });
API methods.
// toggle the drawer navigation window.drawer.toggle(); // open the drawer navigation window.drawer.open(); // close the drawer navigation window.drawer.close();
Events.
window.drawerEl.addEventListener('hy-drawer-init', function (e) { // Fired after the component has been initialized. // The current opened state is provided in the detail field of the event. }); window.drawerEl.addEventListener('hy-drawer-slidestart', function (e) { // Fired when the user starts sliding the drawer. // Note that this event does not occur on every touch motion, since the user could also be scrolling the page! }); window.drawerEl.addEventListener('hy-drawer-slideend', function (e) { // Fired when the user stops sliding the drawer. // For example, it is always proceeded by a slidestart event. // However, it is fired before the drawer starts transitioning towards the next opened state. // The next opened state is provided in the detail field of the event. }); window.drawerEl.addEventListener('hy-drawer-transitioned', function (e) { // Fired after a completed transitioning to the new opened state. // The new opened state is provided in the detail field of the event. });
Changelog:
10/11/2018
- 1.0.0-pre.25
This is fantastic!! Can we implement this type of drawer Menu only for small device?