Kann eine Seitennavigationsleiste mit Materialize CSS nicht erstellt werden?

Ich versuche eine seitliche Navigationsleiste mit MaterializeCSS zu erstellen. Ich habe folgenden Code. Aber wenn ich versuche, es im Browser auszuführen, zeigt es nichts. Es zeigt nur eine leere Seite an.Kann eine Seitennavigationsleiste mit Materialize CSS nicht erstellt werden?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Side Navigation Bar</title> 

    <!-- Compiled and minified jQuery --> 
    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> 
/script> 

    <!--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.97.6/ 
css/materialize.min.css"> 

    <!-- Compiled and minified JavaScript --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/ 
js/materialize.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".button-collapse").sideNav(); 
      $('.collapsible').collapsible(); 
     }); 
    </script> 
</head> 
<body> 
    <nav> 
     <ul class="right hide-on-med-and-down"> 
      <li><a href="#!">First Sidebar Link</a></li> 
      <li><a href="#!">Second Sidebar Link</a></li> 
     </ul> 
     <ul id="slide-out" class="side-nav"> 
      <li><a href="#!">First Sidebar Link</a></li> 
      <li><a href="#!">Second Sidebar Link</a></li> 
     </ul> 
     <a href="#" data-activates="slide-out" class="button-collapse"><i 
    class="mdi-navigation-menu"></i></a> 
    </nav> 
</body> 
</html>

bitte schlagen Sie mir vor, wenn irgendein Fehler dort ist. folgend in CSS (Use-Header, Haupt, Fußzeile in Ihrem body als HTML-5-Standard) folgend

Quelle

2016-04-05 Jaydeep Ranipa

Versuche als nav Inhalt

<nav> 
     <div class="nav-wrapper container"> 
      <a id="logo-container" href="#" class="brand-logo text-darken-1">Logo</a> 

      <div class="container"> 
       <a href="#" data-activates="slide-out" class="button-collapse top-nav full hide-on-large-only black-text"><i 
         class="mdi-navigation-menu"></i></a> 
      </div> 
     </div> 

     <ul id="slide-out" class="side-nav fixed center-align"> 
      <li><a href="#!">First Sidebar Link</a></li> 
      <li><a href="#!">Second Sidebar Link</a></li> 
      <li><a href="#!">First Sidebar Link</a></li> 
      <li><a href="#!">Second Sidebar Link</a></li> 
     </ul>   
</nav>

Und fügt:

header, main, footer { 
    padding-left: 240px; 
}

Quelle

2016-04-05 09:09:10 hemu

Dieser Code funktioniert. Es zeigt das Seitennavigationspanel. Aber es ist schon geöffnet. Ich möchte das Navigationssymbol sehen und durch Klicken darauf sollte es geöffnet werden. –

Das Navigationssymbol wird auf dem Mobilbildschirm angezeigt. Versuchen Sie, Ihren Browser zu minimieren. – hemu

Es gibt ein "Bug" in Ihrem Code - in der siebten Zeile wird Ihr Skript (das jQuery importieren) falsch geschlossen - Sie haben /script> statt </script>

Darüber hinaus verwenden Sie veraltete Methode, um Material-Symbole in i-Tags zu setzen - Sie sollten <i class="material-icons">menu</i> anstelle von <i ="mdi-navigation-menu"></i> haben. Oder, wenn Sie den "alten" Weg bevorzugen, denke ich, dass Sie diese Bibliothek finden und in Ihr Projekt hochladen müssen, als ob ich mich an dieses Recht erinnere, dass diese Methode nicht mehr offiziell unterstützt wird.

Hier ist meine Ausgabe des Codes, das funktioniert:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Side Navigation Bar</title> 

    <!-- Compiled and minified jQuery --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

    <!--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.97.6/css/materialize.min.css"> 

    <!-- Compiled and minified JavaScript --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".button-collapse").sideNav(); 
      $('.collapsible').collapsible(); 
     }); 
    </script> 
</head> 
<body> 
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a> 
    <ul id="slide-out" class="side-nav"> 
     <li><a href="#!">First Sidebar Link</a></li> 
     <li><a href="#!">Second Sidebar Link</a></li> 
    </ul> 
</body> 
</html>

Quelle

2016-04-06 01:16:01 mizurnix

Danke. Ich habe deine Version des Codes ausprobiert. Es zeigt eine Navigationsleiste oben auf der Seite. Aber ich sehe das Navigationssymbol nicht und kann die seitliche Navigationsleiste nicht öffnen. –

Weil es für das mobile Menü ist. Stellen Sie die Größe Ihres Browsers auf eine mobile Größe ein und Sie werden es sehen – mizurnix

Kann ich dieses Symbol auf einem großen Bildschirm sichtbar machen? –

Kann eine Seitennavigationsleiste mit Materialize CSS nicht erstellt werden?

Antwort

Verwandte Themen