Foundation 6 畫布外菜單不會“隱藏”可見頁面

Question

我正在為 Foundation 6 的小視口構建一個畫布外菜單，但我無法重疊整個可見頁面區域。 畫布菜單下方的右側區域沒有背景不透明度。

要嘗試它，只需將瀏覽器視口寬度調整為小於 640 像素（小視口），然后單擊左上角的漢堡圖標。

網站鏈接

我怎樣才能用透明的黑色來墨水整個而不是上半部分？

Answer 1

我認為這是設計使然，但有點馬車。

當關閉畫布菜單時，灰色覆蓋的父級占據屏幕高度的 100%，並且您通常看不到它下方的任何內容以注意到它沒有覆蓋所有內容，因為該內容超出了視口.

您可以將該包裝器上的高度設置為“自動”或完全刪除高度的 100% 值。 需要注意的是，當您執行此操作時，視口中的所有內容都將滾動，而不僅僅是畫布菜單中的內容。

// This element needs to have the height override
<div class="off-canvas-wrapper-inner is-off-canvas-open is-open-left" data-off-canvas-wrapper="">...</div>

.off-canvas-wrapper, .off-canvas-wrapper-inner {
    height: 100% <-- remove this, override it, or set to 'auto'.
}

Answer 2

使用 Javascript，您可以監聽opened.zf.offcanvas事件並手動將灰色覆蓋添加到具有off-canvas-content類的標簽。 相反，監聽closed.zf.offcanvas事件並在它觸發時刪除您添加的 css。

使用 Foundation 文檔中的示例代碼：

使用 HTML：

        <!-- Close button -->
        <button class="close-button" aria-label="Close menu" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>

        <!-- Menu -->
        <ul class="vertical menu">
          <li><a href="#">Foundation</a></li>
          <li><a href="#">Dot</a></li>
          <li><a href="#">ZURB</a></li>
          <li><a href="#">Com</a></li>
          <li><a href="#">Slash</a></li>
          <li><a href="#">Sites</a></li>
        </ul>

      </div>

      <div class="off-canvas-content" data-off-canvas-content>
        <!-- Page content -->
      </div>
    </div>
  </div>
</body>

然后：

$('.off-canvas-wrapper').on('opened.zf.offcanvas', function() {
  $('.off-canvas-content').addClass('grey-out');
});
$('.off-canvas-wrapper').on('closed.zf.offcanvas', function() {
  $('.off-canvas-content').removeClass('grey-out');
});

grey-out類：

.grey-out {
  background: rgba(60,60,60,0.75) !important;
  z-index: 1000;
}

我沒有測試這個，但你明白了。