使用Zurb Foundation修復畫布外菜單

Question

我正在用Zurb Foundation建立一個網頁。 我需要我的網頁才能在手機和筆記本電腦上運行。 我的應用程序的獨特之處在於，我想做比響應式設計更精致的事情。 因此，我大量使用了show-for-small-only和show-for-medium-up類。

在我的電話視圖中，我正在使用Offcanvas導航 。 設置HTML后，如果將頁面內容包含在off-canvas-wrap div中，則效果很好。 但是，在我的情況下，我無法做到這一點。 相反，我希望將頁面的內容放置在“ canvas-wrap-div”之外。 這產生了兩個問題：

1. 菜單不會增長到窗口的大小。
2. 如果我將右邊的畫布菜單設置為窗口的高度，則會將我的內容下移。

我在這里創建了一個演示問題的JSFiddle 。 有沒有一種方法可以使offcanvas菜單僅滑過所有內容的頂部？ 我不需要將所有內容都推到左邊。 推是好的。 我的主要問題是我需要保留內容所在的位置，但在需要時菜單仍要以全尺寸顯示。

謝謝

Answer 1

或者，如果您想實際使用offcanvas菜單並使它與內容重疊，則可以添加此CSS（基礎5）

.off-canvas-wrap.move-right,
.off-canvas-wrap.move-left,
.off-canvas-wrap.move-right .inner-wrap,
.off-canvas-wrap.move-left .inner-wrap {
    height:100%;   
}

.off-canvas-wrap {
    position: absolute;
    z-index:100;
}

.main-content-wrapper {
    padding-top: 2.8125rem;
}

並將您的內容包裝在

<div class="main-content-wrapper">
    [your page content here]
</div>

我通過更改來更新您的小提琴 ，以便您可以實際操作。 顯然，如果您只想有條件地顯示offcanvas菜單，則需要向這些規則添加媒體查詢包裝，以便它們僅在需要時才影響頁面。 否則，您會在不需要時在頂部添加填充。

Answer 2

如果您不希望在單擊導航按鈕時移動內容，則不應使用非導航畫布（這是應該做的事情）。 相反，只需使用Foundation 5 Button並將CSS設置為height = 100％

http://foundation.zurb.com/docs/components/dropdown.html