如何在Foundation中创建一个垂直的画布下拉菜单？

Question

Currently Foundation允许您创建从左侧或右侧水平滑动的画布外菜单。我很想知道如何创建一个可以从上到下垂直滑动的东西：向下移动包裹的内容。

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

提前致谢:)。

Answer 1

我意识到这是一个古老的问题，我不确定你是否还在忙于此，但为了将来参考，这是一个非常简单的css解决方案。

在基金会网站上的offcanvas示例之后，我们可以将'position-left'类替换为'position-top'并添加'data-position =“top”'，如下所示。

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

在CSS中添加“is-open-top”类，它将垂直打开菜单。

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

然后我们需要使用以下类重新定位菜单项

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

最后删除滚动条

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

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

当菜单打开时，它会向下推动您的身体内容。请注意，添加菜单项时不会自动调整大小，因此您需要增加或减少“translateY”距离，并将“top”设置为相同值的负数。