#54: Side Navigation Bar By Using Materialize Framework
This is a slide out menu. You can add a dropdown to your sidebar by using our collapsible component. If you want to see a demo, our sidebar will use this on smaller screens. To use this in conjunction with a fullscreen navigation, you have to use two copies of the same UL.
For Demo & Free Source Code Scroll down.
The Materialize navbar is created by HTML 5 code nav tag with container (recommended div) with nav-wrapper class. For creating responsive navbar with hamburger icon, you may use the built-in class button-collapse for that. The navbar may contain buttons, search box, and links/logo can be aligned left or right easily.
|edge||String||'left'||Side of screen on which Sidenav appears.|
|draggable||Boolean||true||Allow swipe gestures to open/close Sidenav.|
|inDuration||Number||250||Length in ms of enter transition.|
|outDuration||Number||200||Length in ms of exit transition.|
|onOpenStart||Function||null||Function called when sidenav starts entering.|
|onOpenEnd||Function||null||Function called when sidenav finishes entering.|
|onCloseStart||Function||null||Function called when sidenav starts exiting.|
|onCloseEnd||Function||null||Function called when sidenav finishes exiting.|
|preventScrolling||Boolean||true||Prevent page from scrolling while sidenav is open.|
For working example, You will get all files, when you download the source code. And after than you can edit it according to you
if you face any issues you can contact by asking question on Developers Community
You can go through Demo as well as Download source code for the same & make changes according to you