Question

我正在与Zurb Foundation建立一个网页。我需要我的网页在手机和笔记本电脑上运行。我的应用程序的独特之处在于我想做一些比响应式设计更精致的东西。出于这个原因，我正在大量使用show-for-small-only和show-for-medium-up类。

在我的手机视图中，我正在使用Offcanvas navigation。在设置HTML时，如果您在off-canvas-wrap div中包含页面内容，则效果很好。但是，在我的场景中，我不能这样做。相反，我希望将我的页面内容放在off-canvas-wrap div之外。这会产生两个问题：

菜单不会增长到窗口大小。
如果我在窗口的高度上制作正确的画布菜单，它会将我的内容推下来。

我创建了一个JSFiddle here来演示问题。有没有办法让offcanvas菜单滑过所有东西的顶部？我不需要把所有东西推到左边。推进很好。我的主要问题是我需要将内容放在原处，但仍然需要在需要时显示全尺寸菜单。

谢谢

Answer 1

或者，如果您想实际使用offcanvas菜单并让它与您的内容重叠，您可以添加此CSS（Foundation 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>

我updated your fiddle进行了更改，以便您可以看到它的实际效果。显然，如果您只想有条件地显示offcanvas菜单，您将要为这些规则添加媒体查询包装器，这样它们只会在您需要时影响该页面。否则，当您不需要时，您可以在顶部添加填充。

Answer 2

如果您不想在单击导航按钮时移动内容，则不应使用离开导航画布（这应该是它应该做的）。而只需使用Foundation 5 Button并将CSS设置为height = 100％

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

使用Zurb Foundation修复了Off-Canvas菜单

2 个答案: