如何在基金会中创建垂直画布外下拉菜单

Question

当前基础允许您创建从左侧或右侧水平滑入的画布外菜单。我很想知道如何创建一个可以从上到下垂直滑动的内容：向下移动包装的内容。

我知道已经有独立的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

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