如何在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”設置為相同值的負數。