目前,Foundation 允许您创建从左侧或右侧水平滑入的 Canvas 外菜单。我很想知道如何创建一个可以从上到下垂直滑动的工具:向下移动包装的内容。
据我所知,已经有独立的 javascript/ajax 解决方案来解决这个问题。我真正寻找的答案是尽可能遵守现有的基础代码;使用相关的右/左菜单代码作为模板。
提前致谢:)。
最佳答案
我意识到这是一个老问题,我不确定你是否仍然对此耿耿于怀,但为了将来的引用,这里有一个非常简单的 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;
}
工作示例 http://codepen.io/rawiki/pen/eZamZL
当菜单打开时,它会将您的正文内容向下推。请注意,当您添加菜单项时,它不会自动调整大小,因此您需要增加或减少“translateY”距离,并将“top”设置为相同值的负值。
关于javascript - 如何在 Foundation 中创建垂直的 Canvas 外下拉菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30843117/