Materialize Sidenav

Testing materialize sidenav

by mozfet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<nav>
  <div class="nav-wrapper">
    <div class="container">
      <a  href="#"
          data-target="leftSideMenuSliding"
          class="sidenav-trigger right"
          style="top: -5px;">
        <i class="material-icons">menu</i>
      </a>
    </div>
  </div>
</nav>

<ul id="leftSideMenuSliding" class="sidenav">
  <li>
    <a href="#">
      <i class="material-icons left">widgets</i>
    </a>
  </li>
</ul>

JavaScript

// on document ready
$(function() {

  const slidingMenu = $('#leftSideMenuSliding')
  M.Sidenav.init(slidingMenu, {
    menuWidth: 200,
    edge: 'left',
    closeOnClick: true
  })  
})