0

我正在使用Zurb Foundation 4.0.9并且我正在使用.sticky顶部栏菜单。它在大屏幕设备上运行良好。

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

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

编辑： 我正在使用Zurb 文档中提供的顶部栏的代码。当菜单垂直展开时会出现问题。其中一些是溢出的。

EDIT2：这是问题的视觉呈现：截图

感谢您的回答！

4

2 回答 2

0

最好使用顶部栏，因为它将为您处理元素（导航）的大小调整和切换。这是我从 Foundation 的文档页面借用和简化的代码：

<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>

这里的关键是您需要将导航包装在一个stickydiv 中，我认为您已经知道了，并且需要top-bar在 nav 元素上包含一个类。如果您这样做，该基金会将为您处理其余的事情。为了了解菜单在较小屏幕上是如何隐藏的，对其应用了 45px 的高度，与整个导航的高度相同。当您单击菜单图标时，expanded会应用一个类，nav这样您就可以看到您的菜单。

于 2013-03-22T01:42:12.907 回答
0

阅读答案和评论后，这似乎是一个 Zurb Foundation 4.0.9错误（跨设备不一致但仍可重现）。

于 2013-03-22T14:54:06.143 回答