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

Question

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

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

提前致谢：）。

Answer 1

我意识到这是一个古老的问题，并且不确定您是否仍然对此感到困惑，但是为了将来参考，这里提供了一个非常简单的CSS解决方案。

按照Foundation网站上的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;
}

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