無法使用materialize css創建側面導航欄？

我想使用MaterializeCSS創建一個側面導航欄。我有以下代碼。但是，當我嘗試在瀏覽器中運行它時，它不顯示任何內容。它只顯示空白頁。無法使用materialize css創建側面導航欄？

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

如果有任何錯誤，請給我建議。

來源

2016-04-05 Jaydeep Ranipa

嘗試以下內容作爲nav內容

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

並添加按照您的CSS（用頭，主，頁腳您body是作爲HTML 5標準）：

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

來源

2016-04-05 09:09:10 hemu

此代碼的工作。它顯示側面導航面板。但它已經打開了。我想看到導航圖標並點擊它應該打開它。 –

導航圖標將顯示在手機尺寸屏幕上。嘗試最小化您的瀏覽器。 – hemu

有你的代碼中有一個「bug」 - 第7行你的腳本（導入jQuery的那個腳本）被錯誤地關閉 - 你有/script>而不是</script>

另外，您正在使用過時的方法將材質圖標放入i標籤中 - 您應該有<i class="material-icons">menu</i>而不是<i ="mdi-navigation-menu"></i>。或者，如果您更喜歡「舊」方式，我想您必須找到該庫並將其上傳到您的項目中，猶如我記得這一權利一樣，該方法不再受官方支持。

這裏是我的代碼的版本的作品：

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

來源

2016-04-06 01:16:01 mizurnix

謝謝。我試過你的代碼版本。它在頁面頂部顯示一個導航欄。但我沒有看到導航圖標，也無法打開側面導航欄。 –

因爲它是用於移動菜單。將瀏覽器調整爲手機大小，您將看到它 – mizurnix

我可以在大屏幕中顯示此圖標嗎？ –

無法使用materialize css創建側面導航欄？

回答

相關問題