Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Materialize CSS side-nav not working

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?

like image 341
Sheldon Scott Avatar asked Sep 07 '15 12:09

Sheldon Scott


1 Answers

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.)

like image 138
Sheldon Scott Avatar answered Sep 25 '22 10:09

Sheldon Scott