Materialise CSS Rahmen Hamburger Menü funktioniert nicht

Question

Ich versuche, die Hamburger-Taste für ein mobiles Menü auf einer materialisierten Website zu arbeiten, und ich habe die Dokumentation gefolgt, aber aus irgendeinem Grund, wenn ich auf die Schaltfläche klicken geschieht dies:

Aber, wenn ich Vollbild gehen kann ich klar das Menü sehen, wie so.

Wer noch keine Ahnung, was das Problem ist? Dies ist der Code Ich verwende:

<nav> 
    <div class="nav-wrapper"> 
     <a href="" class="brand-logo">logo</a> 
     <a href="" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 
     <ul class="right hide-on-med-and-down"> 
      <li><a href="">home</a></li> 
<li><a href="">About</a></li> 
<li><a href="">services</a></li> 
<ul class="side-nav" id="mobile-demo"> 
    <li><a href="">Home</a></li> 
    <li><a href="">About</a></li> 
    <li><a href="">Services</a></li> 
</ul> 
     </ul> 
    </div> 
</nav> 

Auch ich das JavaScript in einem Skript unten initialisiert haben, und es wird geladen letzte.

<script>  
    $(".button-collapse").sideNav(); 
</script> 

Answer 1

Ein Ausschnitt für mein vorheriges Projekt

<!-- Navbar START--> 
<nav> 
    <div class="nav-wrapper bg__secondary"> 
    <a href="" class="brand-logo">logo</a> 

    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 
    <ul class="right hide-on-med-and-down"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">Login</a></li> 
    </ul> 
    <ul class="side-nav" id="mobile-demo"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#" class="waves-effect waves-light btn-large">Login</a></li> 
    </ul> 
    </div> 
</nav> 
<!-- Navbar END--> 

Ich glaube, Sie die $(".button-collapse").sideNav(); in ein Dokument bereit Funktion

$(document).ready(function() { 
    // REQUIRED FOR BUTTON COLLAPSE 
    $(".button-collapse").sideNav(); 
} 

Mein Material-CSS-Version nicht mit einberechnet: "materialize-css": "^0.100.2", "jquery": "3.2.1"