javascript - Foundation 6 关闭 Canvas 菜单

Question

我正在尝试向我的网站添加一个非 Canvas 菜单，但我是基础初学者，我不知道如何使用它。我已经阅读了 Foundation Sites 的文档，并且我已经在寻找构建 block 但我无法添加 Canvas 。这是我的 HTML:

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
    <div class="off-canvas position-left" id="offCanvas" data-off-canvas>    </div>
    <div class="title-bar">
        <div class="title-bar-left">
            <button class="menu-icon" type="button" data-open="offCanvas"></button>
            <span class="title-bar-title">Title</span>
        </div>
    </div>
    <div class="off-canvas-content" data-off-canvas-content></div>
</div>

我按下了打开 Canvas 的按钮，但我的菜单没有出现。我已经使用了这个库

<link rel="stylesheet" href="style/foundation.css"/>
<script src="style/foundation.js"></script>
<script src="style/js/app.js"></script>
<script src="style/css/app.css"></script>
<script src="style/bower_components/foundation-sites/js/foundation.core.js"></script>
<script src="style/bower_components/foundation-sites/js/foundation.dropdownMenu.js"></script>
<script src="style/bower_components/jquery/dist/jquery.js"></script>
<script src="style/bower_components/foundation-sites/js/foundation.util.keyboard.js"></script>
<script src="style/bower_components/foundation-sites/js/foundation.util.box.js"></script>
<script src="style/bower_components/foundation-sites/js/foundation.util.nest.js"></script>
<script src="style/bower_components/what-input/what-input.js"></script>
<script src="style/bower_components/foundation-sites/js/foundation.offcanvas.js"></script>

谢谢

Answer 1

复制这个:

  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
    <div class="off-canvas position-left" id="offCanvas" data-off-canvas>MY OFF CANVAS</div>
    <div class="off-canvas-content" data-off-canvas-content> <button type="button" class="button" data-toggle="offCanvas">Open Menu</button></div>
  </div>
  </div>

希望对您有所帮助!在带有“打开菜单”按钮的 div 中放置漏洞页面...