基础 6 画布菜单

Foundation 6 Off Canvas Menu

本文关键字：菜单 布菜单 基础      更新时间：2023-09-26

我正在尝试向我的网络添加一个画布外菜单，但我是一个有基础的初学者，我不知道如何使用它。我已经阅读了基金会站点的文档，并且一直在寻找构建块，但我无法添加画布。这是我的 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>

谢谢

复制这个：

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

一些

步骤来帮助你：

  1. 似乎您自己已经包含了所有元素。 这是一个不好的做法，我建议你将基金会的所有JS都包含在一个文件中（就像当你下载新的Foundation时他们交给你一样这里。

  2. 请确保你遵循基金会的结构。 从文档中，画布外元素的结构为：

文档的完整链接在这里 

<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>
相关文章：