基础导航从左向右滑动

Question

我正在使用tis navigation＆gt;＆gt; http://foundation.zurb.com/building-blocks/blocks/foundation-5-top-bar.html

我想要它，当汉堡包菜单显示并且你点击它时表现出从左到右的幻灯片，而不是向上和向下的当前状态，并使菜单的宽度显示为一半

基本上当你点击它时看到截图，背景暗淡然后它来自左边（不是CANVAS）

任何人都可以帮助我

由于

Answer 1

你正在寻找的东西已经包含在粉底中，它被称为“非画布”。以下是文档链接以及使用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

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

    Severity    Code    Description Project File    Line    Suppression State
Error   TS2304  Cannot find name 'Promise'. On.Store.UI (tsconfig project)  L:\ESaleStore\On.Store.UI\src\On.Store.UI\node_modules\@angular\common\src\location\platform_location.d.ts  51  Active
Error   TS2304  Cannot find name 'Promise'. On.Store.UI (tsconfig project)  L:\ESaleStore\On.Store.UI\src\On.Store.UI\node_modules\@angular\common\src\location\platform_location.d.ts  51  Active
Error   TS2304  Cannot find name 'Promise'. On.Store.UI (tsconfig project)  L:\ESaleStore\On.Store.UI\src\On.Store.UI\node_modules\@angular\common\src\pipes\async_pipe.d.ts    45  Active
Error   TS2304  Cannot find name 'Promise'. On.Store.UI (tsconfig project)  L:\ESaleStore\On.Store.UI\src\On.Store.UI\node_modules\@angular\compiler\src\aot\compiler_host.d.ts 25  Active
Error   TS2339  Property 'find' does not exist on type 'BillingPackage[]'.  On.Store.UI (tsconfig project)  L:\ESaleStore\On.Store.UI\src\On.Store.UI\wwwroot\app\Billing\Billing.Service.ts    27  Active

关闭画布菜单触发器。

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

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

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