Foundation 6 Off画布菜单

Question

我正在尝试向我的网站添加画布菜单，但是我是基金会的初学者，我不知道如何使用它。我已经阅读了Foundation Sites的文档，并且我正在寻找构建基块，但是我可以不要添加画布。这是我的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>

我按了打开画布的按钮，但没有出现我的菜单。

<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中，放置孔页面...

Answer 2

一些帮助您的步骤：

看来您已经自己包括了所有元素。 这是一种不好的做法，我建议您将Foundation的所有JS都包含在一个文件中（就像您在此处下载新安装的Foundation时它们会交给您一样）。
请确保您遵循Foundation的结构。 根据文档，Off-Canvas元素的结构为：

完整链接到文档在这里

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

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

    <!-- Menu -->
    <ul class="vertical menu">
      <li><a href="#">Foundation</a></li>
      <li><a href="#">Dot</a></li>
      <li><a href="#">ZURB</a></li>
      <li><a href="#">Com</a></li>
      <li><a href="#">Slash</a></li>
      <li><a href="#">Sites</a></li>
    </ul>

  </div>

      <div class="off-canvas-content" data-off-canvas-content>
         <!-- Page content -->
      </div>
    </div>
  </div>
</body>

Foundation 6 Off画布菜单

问题描述

2 个解决方案

解决方案1
1 2016-02-24 21:14:02

解决方案2
0 2016-11-15 07:47:51

Foundation 6 Off画布菜单

问题描述

2 个解决方案

解决方案1 1 2016-02-24 21:14:02

解决方案2 0 2016-11-15 07:47:51

解决方案1
1 2016-02-24 21:14:02

解决方案2
0 2016-11-15 07:47:51