Question

我的导航栏包含太多按钮，所以在我到达触发按钮折叠的断点之前不久，按钮会重叠我的品牌徽标，看起来很难看。如何设置$('.button-collapse').sideNav();的断点，以便它取代1300px f.e而不是600px的按钮？

编辑：http://jsfiddle.net/kqjy7jbb/9/

Answer 1

删除代码中的容器div，通过压缩所有内容导致问题。它将解决问题。

HTML： （除了删除容器div之外没有任何更改）

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav>
  <div class="nav-wrapper blue-grey darken-4">
    <!-- <div class="container"> ONLY CHANGE-->
    <a href="#" data-activates="mobile-demo" class="button-collapse">
      <i class="material-icons">menu</i>
    </a>

    <a class="brand-logo light immersight-color" href="#"><b>Title</b></a>

    <ul class="right hide-on-med-and-down">
      <li class="active test tooltipped" data-position="bottom" data-delay="100" data-tooltip="Grid Ansicht"><a href="#"><i class="material-icons">apps</i></a></li>
      <li class="test tooltipped" data-position="bottom" data-delay="100" data-tooltip="Panorama Ansicht">
        <a href="#"><i class="material-icons">view_quilt</i></a>
      </li>
      <li class="test tooltipped" data-position="bottom" data-delay="100" data-tooltip="Slide Ansicht">
        <a href="#"><i class="material-icons">view_carousel</i></a>
      </li>
      <li><a class="waves-effect waves-light btn immersight-backgroundcolor">Login</a></li>
      <li><a class="waves-effect waves-light btn immersight-backgroundcolor">Registrieren</a></li>
      <li><a class="waves-effect waves-light btn immersight-backgroundcolor">Download Client</a></li>
    </ul>

    <!-- </div> -->
  </div>
</nav>

CSS （可选，只需在标题品牌徽标中添加填充） ：

@media only screen and (min-width: 993px) {
  .brand-logo {
    margin-left: 15px;
    /* Margin for Title when all buttons are showed i.e. when screen size is large */
  }
}

JQuery （这里没有任何改变）

$('.button-collapse').sideNav({
  menuWidth: '80%', // Default is 240
  edge: 'left', // Choose the horizontal origin
  closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});

以下是fiddle

实现按钮折叠断点

1 个答案: