Sidenav沒有顯示當我最小化瀏覽器

-1

我想做Sidenav，當我有一個全屏幕，菜單顯示，但是當我最小化瀏覽器菜單按鈕顯示，但是當我點擊它，它不顯示任何東西。我不知道爲什麼。我正在使用實現css。 http://jsfiddle.net/xdrL9e83/8/。當我在Jsfiddle中運行它時，它顯示在Navbar之外的切換圖標。我不知道爲什麼Sidenav沒有顯示當我最小化瀏覽器

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

來源

2016-04-05 Mr nerd

你介意作出的jsfiddle這個？ –

似乎在單擊切換圖標時爲我顯示 – ZimSystem

是的，我想要移動導航欄內預訂對面的切換圖標。它看起來像它的外面。 –

你DIV在錯誤的地方關閉。它需要在導航內容後關閉。

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

來源

2016-04-05 12:16:04

我改正了，但仍然當我點擊切換按鈕它仍然是我不顯示列表，但是當我最大化瀏覽器，菜單顯示。我不知道發生了什麼事。它在JsFiddle中運行良好 –

已更新，現在正在運行。您已經在側邊導航欄中「固定」，並在頁面展開時保持其可見性。 –

是的，它在Jsfiddle中運行得非常好，但不適用於瀏覽器，如谷歌瀏覽器，Safari瀏覽器。也許我錯過了一些事情。 –

把頂部的菜單切換圖標（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

來源

2016-04-05 12:12:30 ZimSystem

Sidenav沒有顯示當我最小化瀏覽器

回答

相關問題