11

I have a basic setup of Materialize running and everything seems to be fine, except for the slide out side-nav.

Here's my code. Menu:

<ul class="right hide-on-med-and-down">
    <li><a class="dropdown-button" data-constrainwidth="false" data-beloworigin="true" data-activates="about-drop" href="#!">About<i class="material-icons left">arrow_drop_down</i></a></li>
    <li><a class="modal-trigger" href="#signup">Signup</a></li>
    <li><a class="modal-trigger" href="#sign-in">Sign In</a></li>
</ul>

<ul id="slide-out" class="side-nav">
    <li><a href="#">About</a></li>
    <li><a href="#">Signup</a></li>
    <li><a href="#">Sign In</a></li>
</ul>

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

JS:

<script>
$(".dropdown-button").dropdown();
$(".button-collapse").sideNav();
$(document).ready(function(){
    $('.modal-trigger').leanModal();
});
</script>

I get the appropriate hamburger menu when reducing the screen size, however, clicking the hamburger does not expand out a menu. The URL updates with a hash # and that's it. There are no errors reported in my JS output.

With the other JS functions, the dropdown menu works and the modal works. Stumped as to why Mr. sideNav is not cooperating.

Any ideas?

Sheldon Scott
  • 741
  • 1
  • 7
  • 21

1 Answers1

22

I found a solution. I grabbed the init hack from Materialize: http://materializecss.com/templates/starter-template/js/init.js and then made sure it was last called in my JS. (Putting it before the rest of the JS causes it to fail.)

Sheldon Scott
  • 741
  • 1
  • 7
  • 21
  • 1
    it all depends on the order of your script files ! You have to run your code AFTER jQuery & Materialize libs have been loaded ... I use custom async load with callbacks for optimizations – qdev Jul 04 '16 at 06:02