如何在 Foundation 中创建一个垂直的 off-canvas 下拉菜单?

How to create a vertical off-canvas drop down menu in Foundation?

目前 Foundation 允许您创建非 canvas 菜单,这些菜单可以从左侧或右侧水平滑入。我很想知道如何创建一个可以从上到下垂直滑动的:向下移动包裹的内容。

我知道已经有独立的 javascript/ajax 解决方案。我真正想要的答案是尽可能遵守现有的基础代码;使用相关的 right/left 菜单代码作为模板。

提前致谢:)。

我知道这是一个老问题,我不确定您是否仍然对此感到困惑,但为了将来参考,这里有一个非常简单的 css 解决方案。

按照基金会网站上的 offcanvas 示例,我们可以将 class 'position-left' 替换为 'position-top' 并添加 'data-position="top"',如下所示。

<div class="off-canvas position-top" id="offCanvas" data-off-canvas data-position="top">

在您的 CSS 中添加 class 'is-open-top',这将垂直打开菜单。

.is-open-top
{
    -webkit-transform: translateY(250px);
    -ms-transform: translateY(250px);
    transform: translateY(250px);
}

然后我们需要重新定位菜单项 class

.off-canvas.position-top
{
    left: 0px;
    top: -250px;
    width: 100%;
}

最后去掉滚动条

.off-canvas-wrapper 
{
  overflow: hidden;
}

工作示例http://codepen.io/rawiki/pen/eZamZL

当菜单打开时,它会将您的正文内容向下推。请注意,它不会在您添加菜单项时自动调整大小,因此您需要增加或减少 'translateY' 距离以及将 'top' 设置为相同值的负值。