当我最小化浏览器时 Sidenav 不显示

Question

我正在尝试使用 Sidenav，当我全屏显示时，会显示菜单，但是当我最小化浏览器时，会显示菜单按钮，但当我单击它时，它不会显示任何内容。我不知道为什么。我正在使用 Materialize css。 http://jsfiddle.net/xdrL9e83/8/。当我运行它在 Jsfiddle 中时，它显示切换图标在导航栏之外。不知道为什么

<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

将菜单切换图标 (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

Answer 2

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

当我最小化浏览器时 Sidenav 不显示

Sidenav not showing when i minimise the browser

html

javascript

css

materialize