0

トップバーメニューを使用Zurb Foundation 4.0.9しています。.sticky大画面デバイスでうまく機能します。

しかし、小さな画面でスティッキー メニューを使用すると、メニューの項目が多すぎて下部がはみ出して画面に表示されません (スティッキー プロパティのため)。

最も簡単な答えは、2 つのメニューを作成することです。1 つは大きな画面用に固定され、もう 1 つは小さな画面用に固定されていますが、マークアップが重複してしまいます。別の方法はありますか？

編集: 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 に答える