Question

我正在尝试Sidenav，当我有一个全屏，菜单显示，但当我最小化浏览器菜单按钮显示，但当我点击它，它不显示任何东西。我不知道为什么。我正在使用 Materialize css 。 http://jsfiddle.net/xdrL9e83/8/。当我在Jsfiddle中运行它时，它显示Toggle图标在Navbar之外。我不知道为什么

<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

将菜单切换图标（config.setProtocol("ssh"); config.setParameter("hostname", request.getParameter("ip")); config.setParameter("username", request.getParameter("user"));）放在顶部..

mdi-navigation-menu

演示：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没有显示

2 个答案: