使用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