Question

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

但是当我在小屏幕上使用粘性菜单时，我的菜单中有很多项目，其底部溢出，我无法进入屏幕（由于粘性属性）

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

修改我正在使用Zurb文档中提供的Top Bar代码。当菜单垂直展开时会出现问题。其中一些是溢出的。

EDIT2：以下是问题的直观呈现：Screenshots

感谢您的回答！

Answer 1

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

<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 div中，以及nav元素上的top-bar类。如果您这样做，基金会将为您处理剩下的事情。要了解如何在较小的屏幕上隐藏菜单，应用45px的高度，与整个导航所具有的高度相同。当您点击菜单图标时，expanded课程已应用于nav，因此您可以看到自己的菜单。

Answer 2

在阅读了答案和评论之后，似乎这是Zurb Foundation 4.0.9 bug （设备之间的不一致但仍然可以重现）。

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

2 个答案: