Materialize CSS Side-Nav funktioniert nicht

Ich habe eine Grundkonfiguration von Materialise, die ausgeführt wird, und alles scheint in Ordnung zu sein, mit Ausnahme des Slide-Out-Navigationsgeräts.

Hier ist mein Code. Speisekarte

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

Ich erhalte das entsprechende Hamburger-Menü, wenn ich die Bildschirmgröße reduziere. Wenn ich jedoch auf den Hamburger klicke, wird das Menü nicht erweitert. Die URL wird mit einem Hash # aktualisiert und das war's. In meiner JS-Ausgabe wurden keine Fehler gemeldet.

Mit den anderen JS-Funktionen funktioniert das Dropdown-Menü und das modale. Ratlos, warum Mr. sideNav nicht kooperiert.

Irgendwelche Ideen

Antworten auf die Frage(2)

Ihre Antwort auf die Frage