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（使用ヘッダー、HTML-5標準としてあなたbodyのメイン、フッター）に以下を追加します。

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

出典

2016-04-05 09:09:10 hemu

このコードは動作します。 Side-Navパネルが表示されます。しかし、すでに開かれています。私は、ナビゲーションアイコンをクリックしてそれを開く必要がありますをクリックしてください。 –

ナビゲーションアイコンがモバイルサイズ画面に表示されます。ブラウザを最小限に抑えてください。 – hemu

ありあなたのコードに「バグ」があります - スクリプトの7行目（jQueryをインポートしているもの）が正しく閉じられていません - </script>の代わりに/script>

さらに、材料タグをiタグに入れるために古くなった方法を使用しています - <i ="mdi-navigation-menu"></i>の代わりに<i class="material-icons">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

ありがとうございます。あなたのバージョンのコードを試しました。それはページの上にnav-barを表示します。しかし、ナビゲーションアイコンが表示されず、サイドナビゲーションバーを開くことができません。モバイルメニュー用ですので –

です。ブラウザをモバイルサイズにリサイズすると、それは表示されます – mizurnix

このアイコンを大きな画面で見えるようにすることはできますか？ –

materialize cssを使用してサイドナビゲーションバーを作成できませんか？

答えて

関連する問題