0

私はFoundationが初めてで、Foundationのいくつかのコンポーネントを1つのナビゲーションバーに混在させようとしています.htmlで提供およびデモされたクラスとデータ属性を使用するだけです。

レスポンシブ トグル ドロップダウンの指示に従いました: http://foundation.zurb.com/sites/docs/responsive-navigation.html

そして、そのスティッキーを作りたいです。参照: http://foundation.zurb.com/sites/docs/sticky.html#sticky-navigation、「タイトル バー、DropdownMenu、スティッキーを備えたスティッキー ナビゲーション メニューの作成!」

彼らはトグル部分を省略したので、htmlに提供するクラスとデータ属性だけを使用してこれが実現可能かどうかはわかりません.

両方を別々に動作させることはできますが、一緒にすることはできません。バグがあるようですが、それは私かもしれません。これを行うことに成功した可能性のある人から聞いてみたいです！

これは私がこれまでに持っているものです。より広いウィンドウは粘着性があり、応答性があります。少し上にスクロールするまで、ドロップダウンは最初はジャンボトロンの後ろにあります。

狭いウィンドウのレスポンシブ トグルは機能しますが、スティッキーは機能しません。そして、ウィンドウを少し広げるまで、最初はドロップダウンがジャンボトロンの下に落ちます。ドリルダウンは正常に機能します。

これはコードです：

<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