Collapse Side Nav/Menu in Material Design (simple method)

Collapse Side Nav/Menu in Material Design

Whenever user clicks on left most menu icon, side navigation panel has to be displayed.

//css

<style>

.button-collapse { display:block !important;}

</style> 

//html

<nav>

<div class="nav-wrapper">

<a href="#" data-activates="side-nav" class="button-collapse"><i class="material-icons">menu</i></a>

<a href="#!" class="brand-logo">Logo</a>

<ul class="right hide-on-med-and-down">

<li><a href="http://its.net.in/">Home</a></li>

<li><a href="http://its.net.in/">About Us</a></li>

<li><a href="http://its.net.in/">Services</a></li>

<li><a href="http://its.net.in/">Contact Us</a></li>

</ul>

<ul class="side-nav" id="side-nav">

<li><a href="http://its.net.in/">Home</a></li>

<li><a href="http://its.net.in/">About Us</a></li>

<li><a href="http://its.net.in/">Services</a></li>

<li><a href="http://its.net.in/">Contact Us</a></li>

</ul>

</div>

</nav> 

//script 

<script>

$('.button-collapse').sideNav({

menuWidth: 300, // Default is 240

edge: 'left', // Choose the horizontal origin

closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor

}

);

</script>