MateralizeCSS funktioniert nicht richtig

Ich habe versucht zu verwenden MateralizeCSS; nur entworfen und erstellt von Google; als Alternative für als Test und die Unterschiede selbst zu sehen. Allerdings gibt es bei Materalize etwas Seltsames. Die HTML Setup auf ihrer offiziellen Website angegeben ist einfach, aber wenn ich versuche, die Größe des Fensters und drücken Sie die Hamburger-Symbol passiert nichts. Dies bedeutet, dass das JavaScript nicht korrekt geladen wird, aber es ist tatsächlich in meiner HTML-Datei enthalten. Zuerst habe ich versucht, die CDNs zu benutzen und es funktioniert nicht. Also habe ich beschlossen, die Dateien herunterzuladen und in der Datei zu verlinken, aber es funktioniert immer noch nicht.MateralizeCSS funktioniert nicht richtig

Mein HTML:

<!DOCTYPE html> 
<html lang="en-US" class="gr__materializecss_com"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title>Materialize Template</title> 

    <!-- Import Google Icon Font --> 
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

    <!-- Compiled and minified CSS --> 
    <link rel="stylesheet" href="materialize/css/materialize.css"> 
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> --> 
</head> 

<body> 
    <nav role="navigation" class="light-green"> 
     <div class="nav-wrapper container"> 
      <a href="#" class="brand-logo">Brand</a> 
      <ul class="right hide-on-med-and-down"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Sign Up</a></li> 
       <li><a href="#">Login</a></li> 
      </ul> 
      <ul class="side-nav" id="nav-mobile"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Sign Up</a></li> 
       <li><a href="#">Login</a></li> 
      </ul> 
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a> 
     </div> 
    </nav> 

    <!-- Import jQuery before materialize.js --> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <!-- Compiled and minified JavaScript --> 
    <script type="text/javascript" src="materialize/js/materialize.js"></script> 

<!--<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script> 
    --> 

</body> 

</html>

öffnete ich den Inspektor die Starter Template Struktur für die navbar zu sehen und es ist das gleiche wie meine. Ich kann das Problem nicht lösen. Also jede logische Erklärung wird geschätzt.

Quelle

2017-06-12 Tes3awy

Sie den Code für die sidenav nicht enthalten http://materializecss.com/templates/starter-template/js/init.js – karthick

@karthick mein schlechtes! – Tes3awy

Nur ein Nitpick: Materialise ist nicht im Besitz oder offiziell von Google unterstützt. Google besitzt Material Design (die Designsprache), aber Materialise ist nur ein inoffizielles Projekt, das Material Design verwendet. – sbking

Sie müssen nur das jQuery-Plugin initialisieren, damit die sideNav-Methode funktioniert. Hoffe das hilft!

<!DOCTYPE html> 
 
<html lang="en-US"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
    <title>Materialize Template</title> 
 

 
    <!-- Import Google Icon Font --> 
 
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
    <!-- Compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> 
 

 
</head> 
 

 
<body> 
 
    <nav role="navigation" class="light-green"> 
 
     <div class="nav-wrapper container"> 
 
      <a href="#" class="brand-logo">Brand</a> 
 
      <ul class="right hide-on-med-and-down"> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">Sign Up</a></li> 
 
       <li><a href="#">Login</a></li> 
 
      </ul> 
 
      <ul class="side-nav" id="nav-mobile"> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">Sign Up</a></li> 
 
       <li><a href="#">Login</a></li> 
 
      </ul> 
 
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a> 
 
     </div> 
 
    </nav> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
    <!-- Compiled and minified JavaScript --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script> 
 

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

 
</body> 
 

 
</html>

Quelle

2017-06-13 03:38:12 Mark

MateralizeCSS funktioniert nicht richtig

Antwort

Verwandte Themen