0

我是 Foundation 的新手，我试图将 Foundation 的几个组件混合到一个导航栏中，只需使用他们在 html 中提供和演示的类和数据属性。

我遵循了响应式切换下拉菜单的说明：http: //foundation.zurb.com/sites/docs/responsive-navigation.html

我想让它变得粘稠。请参阅：http: //foundation.zurb.com/sites/docs/sticky.html#sticky-navigation，“使用标题栏、下拉菜单和粘性创建粘性导航菜单！”

他们省略了切换部分，所以我不知道仅使用它们为 html 提供的类和数据属性是否可行。

我可以让他们两个单独工作，但不能一起工作。它似乎有问题，但它可能是我。我很想听听任何可能成功做到这一点的人！

这是我到目前为止所拥有的。较宽的窗口具有粘性和响应性。下拉列表最初位于 jumbotron 之后，直到您向上滚动一点。

窄窗口的响应式切换有效，但粘性无效。最初，下拉菜单位于 jumbotron 下方，直到您稍微扩大窗口。向下钻取工作正常。

这是代码：

<div class="row">
  <div data-sticky-container>
    <div class="top-bar" data-responsive-toggle="main-menu" data-hide-for="medium" data-sticky data-options="marginTop:0;" style="width:100%" data-top-anchor="1">
      <button class="menu-icon" type="button" data-toggle></button>
      <div class="top-bar-title">Fruit Is Good</div>
    </div>
  </div>

  <div data-sticky-container>
    <nav class="top-bar" id="main-menu" data-sticky data-options="marginTop:0;" style="width:100%" >
      <div class="top-bar-left">
        <ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
          <li class="menu-text">Fruit Is Good</li>
          <li class="active"><a href="home.html">Home</a></li>
          <li><a href="apples.html">Apples</a></li>
            <li><a href="#">Citrus</a>
              <ul class="vertical menu">
                <li><a href="oranges.html">Oranges</a></li>
                <li><a href="#">Limes</a></li>
                <li><a href="#">Lemons</a></li>
              </ul>
            </li>
          <li><a href="bananas.html">Bananas</a></li>
          <li><a href="gallery.html">Gallery</a></li>
        </ul>
      </div>
    </nav>
  </div>
</div>

你可以在这里找到演示：http: //lucillekenney-demos.com/fruit/home.html

4

0 回答 0