jquery - 基础导航从左向右滑动

Question

我正在使用 tis 导航 >> http://foundation.zurb.com/building-blocks/blocks/foundation-5-top-bar.html

当汉堡包菜单显示时，我想要它，当你点击它时，它会从左到右而不是从上到下滑动，它是当前的样子，并使菜单的宽度显示到一半

基本上当你点击它时看到屏幕截图，背景变暗然后它从左边出现(不在 CANVAS 之外)

谁能帮帮我

谢谢

Answer 1

你正在寻找的东西已经包含在基础中，它被称为“ Canvas 外”。下面是文档链接和使用 Zurb 6 时需要执行的操作的示例。

Zurb 5 - http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html

Zurb 6 - http://foundation.zurb.com/sites/docs/off-canvas.html

非 Canvas 菜单和网站内容。

<div class="off-canvas-wrapper">
    <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
      <!-- Your menu or Off-canvas content goes here -->
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
      <!-- Your page content lives here -->
    </div>
</div>

关闭 Canvas 菜单触发器。

<button type="button" class="button" data-toggle="offCanvasLeft">Open Menu</button>

在 offcanvas 菜单中使用的可选关闭按钮触发器。

<button class="close-button" aria-label="Close menu" type="button" data-close>
  <span aria-hidden="true">&times;</span>
</button>