1

Foundation ビルディング ブロック セクションの例を使用して、「キャンバス外のナビゲーションを備えたトップ バー」に取り組んでいます。

ここに私のコードがあります、

$(document).foundation();
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

    <!-- off-canvas title bar for 'small' screen -->
    <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
      <div class="title-bar-left">
        <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
        <span class="title-bar-title">Menu</span>
      </div>

    </div>

    <!-- off-canvas left menu -->
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      <ul class="menu vertical">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>

    <!-- "wider" top-bar menu for 'medium' and up -->
    <div id="widemenu" class="top-bar">
      <div class="top-bar-left">
        Icon
      </div>
    </div>

    <!-- original content goes in this container -->
    <div class="off-canvas-content" data-off-canvas-content>
      <div class="row column">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>

    <!-- close wrapper, no more content after this -->
  </div>
</div>

(ps stackoverflow のコード エディターはトグル部分でも機能しませんが、jsfiddle で確認できます: https://jsfiddle.net/03bx493q/ )

そして、何か変なものを見ることができます。

  • ボタンをクリックすると (初回)、デスクトップ バージョンのメニューとオフ キャンバス メニューの両方が表示されます。次に、もう一度ボタンをクリックしてメニューを閉じます。

  • ボタンをクリックすると (2 回目)、キャンバス外のメニューのみが表示されます。

「hide-for-small」クラスをワイドメニューに追加するなど、さまざまな解決方法を試しました（期待どおりには役に立ちません）...

ありがとうございます！

4

1 に答える 1

0

正確な問題はわかりませんが、html 構造が正しくありません。私はあなたのコンテンツを使用して修正した実用的な例を持っています:

フィドルのデモ

HTML:

<div class="off-canvas-wrapper">
  <!-- off-canvas left menu -->
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
      <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
      <ul class="mobile-ofc vertical menu">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>

    <!-- "wider" top-bar menu for 'medium' and up -->
    <div class="off-canvas-content" data-off-canvas-content>
      <div id="widemenu" class="top-bar show-for-medium">
        <ul class="menu">
          <li class="topbar-title">
            Icon
          </li>
        </ul>
      </div>

      <!--top-bar for small-->
      <div id="offCanvasLeft" class="title-bar hide-for-medium">
        <div class="title-bar-left">
          <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
          <span class="title-bar-title">Menu</span>
        </div>
      </div>

      <!-- original content goes in this container -->
      <div class="expanded row">
        <div class="row columns">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
      </div>
    </div>
  </div>
于 2016-03-26T12:37:52.620 に答える