Question

我有一个侧面导航的代码：

<ul id="slide-out" class="side-nav">
  <li><a class="subheader">Last Updated:</a></li>
  <li><a>Text Here</a></li>
  <li><div class="divider"></div></li>
  <li><a class="subheader">Subheader</a></li>
  <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>

我还有以下标题代码：

<header>
    <div class="navbar-fixed">
        <nav>
            <div class="nav-wrapper blue darken-1">
                <a class="brand-logo center" href="#">Website Name</a>
  <ul class="right">
    <li><a data-activates="slide-out" class="button-collapse" href="#"><i class="material-icons">menu</i></a></li>
  </ul>
            </div>
        </nav>
    </div>
</header>

那么为什么菜单项不会出现在我的导航栏中，为什么它不会触发侧导航？

此外，如果我删除button-collapse课程，我可以看到菜单，但点击它不会触发side-nav

Here是我的jsFiddle

编辑：我的问题不是图标，而是点击菜单图标/文字不会激活侧面导航菜单。

如何在移动和桌面上进行侧导航

Answer 1

班级button-collapse在CSS中设置了display:none，因为以下是桌面：

@media only screen and (min-width: 993px)
nav a.button-collapse {
    display: none;
}

不确定原因。

但是你可以使用除button-collapse以外的其他类，它会起作用。

HTML：

<header>
            <div class="navbar-fixed">
                <nav>
                    <div class="nav-wrapper blue darken-1">
                        <a class="brand-logo center" href="#">Website Name</a>
          <ul class="right">
            <li><a data-activates="slide-out" class="my-btn" href="#"><i class="material-icons">menu</i></a></li>
          </ul>
                    </div>
                </nav>
            </div>   
</header>

JS：

(function($){
  $(function(){

    $('.my-btn').sideNav({
      edge: 'left', // Choose the horizontal origin
      closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
      draggable: true // Choose whether you can drag to open on touch screens
    }
    );

  }); // end of document ready
})(jQuery); // end of jQuery name space

小提琴：https://jsfiddle.net/6hfrw33n/

Answer 2

如果您希望菜单在所有屏幕尺寸上都可以访问 向 .sidenav-trigger 添加一个简单的帮助程序类大图显示。

<header>
    <div class="navbar-fixed">
        <nav>
            <div class="nav-wrapper blue darken-1">
                <a class="brand-logo center" href="#">Website Name</a>
  <ul class="right">
    <li><a data-activates="slide-out" class="button-collapse show-on-large" href="#"><i class="material-icons">menu</i></a></li>
  </ul>
            </div>
        </nav>
    </div>
</header>

如此处所示：https://materializecss.com/sidenav.html

Answer 3

在js文件中添加此行 $（＆＃39; .button-collapse＆＃39;）。sideNav（）;

MaterialiseCSS Navbar按钮不触发侧导航

3 个答案: