如何显示在小屏幕上溢出的Zurb基金会粘性菜单？

Question

我正在使用Zurb Foundation 4.0.9，我正在使用.sticky顶栏菜单。它适用于大屏幕设备。

但是，当我在小屏幕上使用粘性菜单时，我的菜单中有太多项目，它的底部溢出，我无法将它放到屏幕中（因为粘性属性）。

最简单的答案是创建两个菜单，一个对于大屏幕是粘性的，另一个对于小屏幕是固定的，但是我会有重复的标记。有另一种方法吗？

编辑： 我使用的是Zurb文档中提供的Top Bar的代码。当菜单是垂直扩展时出现问题。其中一些溢出。

EDIT2：这是问题的可视化呈现：Screenshots

谢谢您的回答！

Answer 1

看完答案和评论后，似乎这是一个Zurb基金会4.0.9 错误（不一致的设备，但仍然可重现）。

Answer 2

最好使用Top Bar，因为它会为您处理元素（导航）的大小调整和切换。下面是我借了代码和简化从基金会的文档页面：

<div class="sticky"> 
    <nav class="top-bar"> 
     <ul class="title-area"> 
     <!-- Title Area --> 
     <li class="name"> 
      <h1><a href="#">Top Bar Title </a></h1> 
     </li> 
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
     <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
     </ul> 

     <section class="top-bar-section"> 
     <!-- Left Nav Section --> 
     <ul class="left"> 
      <li class="divider"></li> 
      <li class="active"><a href="#">Main Item 1</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Main Item 2</a></li>  
      <li class="divider"></li> 
     </ul> 

     <!-- Right Nav Section --> 
     <ul class="right"> 
      <li class="divider hide-for-small"></li> 
      <li class="has-dropdown"><a href="#">Main Item 3</a> 

      <ul class="dropdown"> 
       <li><label>Dropdown Level 1 Label</label></li> 
       <li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a> 

       <ul class="dropdown"> 
        <li><a href="#">Dropdown Level 2a</a></li> 
        <li><a href="#">Dropdown Level 2b</a></li>     
       </ul> 
       </li>   
      </ul> 
      </li> 
      <li class="divider"></li> 
      <li class="has-form"> 
      <form> 
       <div class="row collapse"> 
       <div class="small-8 columns"> 
        <input type="text"> 
       </div> 
       <div class="small-4 columns"> 
        <a href="#" class="alert button">Search</a> 
       </div> 
       </div> 
      </form> 
      </li> 
      <li class="divider show-for-small"></li> 
      <li class="has-form"> 
      <a class="button" href="#">Button!</a> 
      </li> 
     </ul> 
     </section> 
    </nav> 
</div> 

这里的关键是，你需要用一个sticky格，我想你已经知道里面的导航，并在一个top-bar类nav元素。如果你这样做，基金会会为你处理其余的问题。要了解菜单如何隐藏在较小的屏幕上，应用45px的高度，与整个导航栏的高度相同。当你点击菜单图标expanded类被应用于nav，所以你可以看到你的菜单。