ブラウザを最小化するとSidenavが表示されない

Question

Sidenavを実行しようとしていますが、全画面表示のときにメニューが表示されますが、ブラウザを最小化するとメニューボタンが表示されますが、何でもどうしてか分かりません。私はマテリアルサイズcssを使用しています。 http://jsfiddle.net/xdrL9e83/8/。 Jsfiddleで実行すると、Navbarの外にあるToggleアイコンが表示されます。私は知らないなぜ

<nav> 
    <div class="nav-wrapper container"> 
    <a id="logo-container" href="#" class="brand-logo">Booking</a> 
    <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons"></i></a> 
    </div> 
    <ul class="hide-on-med-and-down"> 
    <li><a href="#">Patients</a></li> 
    <li><a href="#">Patients History</a></li> 
    <li><a href="#">Bookings</a></li> 
    <li><a href="#">Notes</a></li> 
    <li><a href="#">Add Patient</a></li> 
    </ul> 
    <ul id="slide-out" class="side-nav fixed"> 
    <li class="bold"><a href="#" class="waves-effect waves-teal">Patients</a></li> 
    <li class="bold"><a href="#">Patients History</a></li> 
    <li><a href="#">Bookings</a></li> 
    <li><a href="#">Notes</a></li> 
    <li><a href="#">Add Patient</a></li> 
    </ul> 
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 
</nav> 

Javascriptを

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

Answer 1

あなたDIVは間違った場所で閉じられています。あなたのNavの内容の後に閉じる必要があります。

<nav> 
    <div class="nav-wrapper container"> 
    <a id="logo-container" href="#" class="brand-logo">Booking</a> 
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 
    <ul class="right hide-on-med-and-down"> 
    <li><a href="#">Patients</a></li> 
    <li><a href="#">Patients History</a></li> 
    <li><a href="#">Bookings</a></li> 
    <li><a href="#">Notes</a></li> 
    <li><a href="#">Add Patient</a></li> 
    </ul> 
    <ul id="slide-out" class="side-nav"> 
    <li class="bold"><a href="#" class="waves-effect waves-teal">Patients</a></li> 
    <li class="bold"><a href="#">Patients History</a></li> 
    <li><a href="#">Bookings</a></li> 
    <li><a href="#">Notes</a></li> 
    <li><a href="#">Add Patient</a></li> 
    </ul> 
    </div> 
</nav> 

http://jsfiddle.net/aaronfranco/xdrL9e83/14/

Answer 2

上部のメニューのトグルアイコン（mdi-navigation-menu）を入れ..

<nav> 
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>  
    <div class="nav-wrapper container"> 
    <a id="logo-container" href="#" class="brand-logo">Booking</a> 
    <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons"></i></a> 
    </div> 
    <ul class="hide-on-med-and-down"> 
    <li><a href="#">Patients</a></li> 
    <li><a href="#">Patients History</a></li> 
    <li><a href="#">Bookings</a></li> 
    <li><a href="#">Notes</a></li> 
    <li><a href="#">Add Patient</a></li> 
    </ul> 
    <ul id="slide-out" class="side-nav fixed"> 
    <li class="bold"><a href="#" class="waves-effect waves-teal">Patients</a></li> 
    <li class="bold"><a href="#">Patients History</a></li> 
    <li><a href="#">Bookings</a></li> 
    <li><a href="#">Notes</a></li> 
    <li><a href="#">Add Patient</a></li> 
    </ul> 
</nav> 

デモ：http://codeply.com/go/mMvlUnsNRT