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

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

当汉堡菜单显示时，我想要它，然后单击它，表现出从左到右而不是从上到下的滑动方式，并使菜单的宽度显示一半

基本上在单击屏幕截图时看到屏幕截图，背景变暗，然后从左侧发出（不关闭画布）

谁能帮我

谢谢

最佳答案

您正在寻找的内容已经包含在基础中，它称为“ off-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

关闭画布菜单和网站内容。

<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>

关闭画布菜单触发器。

<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>

关于jquery - 基础导航从左向右滑动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44331309/