Create a beauty and practical nav drawer (like material drawer) easily
Direct Library Links:
material icons and Roboto Font is necessary for the correct functioning. You can view here an live example the gestures only works for mobile devices
To begin, we will need include 2 HTML tags in our document, this tags will work as reference for JavaScript.
<span class="__modal_drawer"></span> <!-- 1 -->
<div id="drawer_js"></div> <!-- 2 -->
- ( __modal_drawer ) <- semi transparent background than appears when menu is triggered, for lock the background content
- ( drawer_js ) <- main content for drawer
Our drawer is initilized with init
method, from Drawer
and recives an object than contains 2 main nodes, header section named main
and items (menu options) section named menu
example:
Drawer.init({
main: // header,
menu: // menu-items
})
main
node must contain an object with the next options:
main: {
background: 'sources/bg.jpg', // <- main background path (cover photo)
photo: 'sources/cobie-smulders.jpg', // <- photo profile path
title: 'Cobie Smulders', // <- user name
subtitle: 'exam@mail.com', // <- email or user mote
}
menu
node recives an object, where each item is defined with the next structure
menu: [{
icon: 'account circle', // <- define item icon
label: 'Mi perfil', // <- define item label
action: '/profile' // <- URL route or function
},{
separator: 'settings' // <- separator
},{
icon: 'share',
label: 'Compartir',
  action: share  // <- add pointer to `function share() {...}` it will be executed on click event
}]
icon:
recives a String, the name is getted from material icons librarylabel:
recives a String, conatains label for menu itemaction:
this element can recives a path (URL|route) or a function, for function we pass a reference, without "quotation marks" and () parenthesis, anonymous functions are not supported for nowseparator:
recives a String used for name a section
Drawer totally configured:
Drawer.init({
main: {
background: 'sources/bg.jpg',
photo: 'sources/cobie-smulders.jpg',
title: 'Cobi Smulders',
subtitle: 'exam@mail.com'
},
menu: [{
icon: 'account_circle',
label: 'Profile',
action: '/profile'
},{
icon: 'favorite',
label: 'Favorite',
action: '/favorite'
},{
icon: 'share',
label: 'Share',
action: share
},{
separator: 'settings'
},{
icon: 'settings_applications',
label: 'Settings',
action: '/settings'
}]
})
It is posible include a trigger for display the nav drawer, setting the mdrawer_trgger id in any tag of your HTML, example:
<button id="mdrawer_trgger">menú</button>