Zurb基金会修复了非画布菜单

Question

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

在我的手机视图中，我正在使用Offcanvas navigation。在设置HTML时，如果将页面的内容包含在非画布包装div中，它会很好用。但是，在我的情况下，我无法做到这一点。相反，我想让我的页面内容不在非画布包装div内。这会产生两个问题：

1. 菜单不会增加到窗口的大小。
2. 如果我将右画布菜单设置为窗口的高度，它会将内容向下推。

我创建了一个演示问题的JSFiddle here。有没有一种方法可以让offcanvas菜单滑过所有内容？我不需要把所有东西都推到左边。推送很好。我的主要问题是我需要将内容放在原来的位置，但仍然会在需要时显示全尺寸的菜单。

谢谢

Answer 1

如果您不希望您的内容，当您单击导航按钮，那么你不应该使用过导航画布上移动（这就是它应该做的）。而不是仅仅使用基金会5按钮，并设置CSS是高度= 100％

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

Answer 2

或者，如果你想实际使用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> 

我updated your fiddle与改变您的内容，所以你可以看到诉权它ñ。显然，如果您只想有条件地显示offcanvas菜单，则需要将媒体查询包装添加到这些规则中，以便只在需要时才会影响页面。否则，当你不需要它时，你可以向顶部添加填充。