This is a responsive implementation of a navigation drawer that will also work on wide screens where the drawer will stay open on the left side.
The navigation drawer is a UI panel that shows your app's main navigation menu. It is hidden when not in use, but appears when the user swipes a finger from the left edge of the screen or, when at the top level of the app, the user touches the drawer icon in the app bar.
Usage
1. Include zuix.js
library
If not already included, add the following line right before the end of the head
section in the HTML
document:
<script src="https://cdn.jsdelivr.net/npm/zuix-dist"></script>
2. Load the drawer layout
Add the ctrl z-load
attributes to the container of your navigation drawer
<div ctrl z-load="@lib/controllers/drawer-layout"
z-context="menu-drawer"
z-options="drawer_options">
<!-- Add Navigation Drawer menu and content here -->
</div>
Set the options
drawer_options = {
on: {
'drawer:open': function(e) {
// things to do when drawer is open
},
'drawer:close': function(e) {
// things to do when drawer is closed
},
'layout:change': function(e, status) {
// where `status` object has two fields
// {
// smallScreen, (boolean)
// drawerLocked (boolean)
// }
}
},
autoHideWidth: 960,
drawerWidth: 280
};
Option attributes
ctrl z-load="@lib/controllers/drawer-layout"
(constructor)
loads thedrawer-layout
controller on the host elementz-context
optional
identifier name to be used to reference this component from JavaScript.data-o-width
optional
panel width. Default value is280
pixels.data-o-hide-width
optional
auto-hide panel if available width is less than specified value, otherwise show as fixed. Set to-1
to always auto-hide. Default value is960
pixels.
Scripting
Event listeners
var menuDrawer;
// since the component loads asynchronously
// a callback is required to ensure the component is ready
zuix.context('menu-drawer', (md) => {
// add event listeners
md.on({
'drawer:open': function(e) { /* ... */ },
'drawer:close': function(e) { /* ... */ },
'layout:change': function(e, d) { /* ... */ }
});
// store a global reference of
// the component for later use
menuDrawer = md;
});
Methods
// open the drawer
menuDrawer.open();
// close the drawer
menuDrawer.close();
// toggle open/close drawer
menuDrawer.toggle();
// enable/disable control by gesture
menuDrawer.lock(true);
You can try these command in the developer console right now from this page.