实现按钮折叠断点

问题描述：

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

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

请上传您的问题的屏幕截图。你可以提供一个同样的jsfiddle吗？这将有所帮助。 – hulkinBrain

我加了一个小提琴:) – greedsin

答

在你的代码中删除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

实现按钮折叠断点

相关推荐