マテリアライズサイド・ナビゲーションリンクが

Question

動作しません。私はそれで何ができる私はmaterializecssでウェブを作ってるんだけど、私はサイドナビゲーションに追加のリンクが動作しない、

私はリンクにサイドをクリックすると、 -nav近い コード：

<div class="navbar-fixed"> 
    <nav> 
     <div class="nav-wrapper"> 
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 
      <a href="index.php" class="brand-logo left thin" title="bcgraphixx">Page Title</a> 
      <ul class="right hide-on-med-and-down"> 
       <li><a class="waves-effect" href="index.php">Home</a></li> 
       <li><a class="waves-effect" href="about-us.php">About us</a></li> 
       <li><a class="waves-effect" href="services.php">Services</a></li> 
       <li><a class="waves-effect" href="book.php">booking</a></li> 
      </ul> 

      <ul class="side-nav" id="mobile-demo"> 
       <li> 
        <div class="userView"> 
         <div class="background"> 
          <img src="<?php echo $srcurl; ?>/cover.png"> 
         </div> 
         <a href="#!admin"><img class="circle" src="<?php echo $srcurl; ?>/logo.png"></a> 
         <a href="#!bcgraphix" title="bcgraphixTemplate"><span class="black-text name">DIGINEWS</span></a> 

        </div> 
       </li> 

       <li><a href="##"><center>MENU</center></a></li> 
       <li><a class="waves-effect" href="index.php">Home</a></li> 
       <li><a class="waves-effect" href="about-us.php">About us</a></li> 
       <li><a class="waves-effect" href="services.php">Services</a></li> 
       <li><a class="waves-effect" href="book.php">booking</a></li> 
      </ul> 

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

    </nav> 
</div> 

Answer 1

1. documentReadyイベント内sideNavのためのあなたのJSコードをラップし、真などのパラメータcloseOnClickを設定します。

2. クラス "navbar-fixed"のdivと同じレベルのサイドメニュー（クラス "side-nav"のul要素）を表示します。これは、オーバーレイに関する既知の問題を回避するためです。それが解決したかthis stackoverflow question and accepted answer

$(document).ready(function(){ 
 
$('.button-collapse').sideNav({ 
 
     closeOnClick: true 
 
    } 
 
); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 
 

 
<div class="navbar-fixed"> 
 
    <nav> 
 
     <div class="nav-wrapper"> 
 
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 
 
      <a href="#" class="brand-logo right thin" title="bcgraphixx">Page Title</a> 
 
      <ul class="right hide-on-med-and-down"> 
 
       <li><a class="waves-effect" href="#">Home</a></li> 
 
       <li><a class="waves-effect" href="#">About us</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
</div> 
 
<ul class="side-nav" id="mobile-demo"> 
 
       <li><a href="##"><center>MENU</center></a></li> 
 
       <li><a class="waves-effect" href="#!">Home</a></li> 
 
       <li><a class="waves-effect" href="#!">About us</a></li> 
 
</ul>