Question

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

复制此内容：

- (void)viewWillAppear:(BOOL)animated
{
  [super viewWillAppear:animated];
  [self.fetchedController willAppear];
}

我希望它有所帮助！在带有“打开菜单”的div中 - 按钮你放入了孔页...

Answer 2

帮助您的一些步骤：

您自己似乎已经包含了所有元素。这是一个不好的做法，我建议你在一个文件中包含所有的基础JS（就像你下载新的基础安装时一样 here
请确保您遵循基金会的结构。从文档中，Off-Canvas元素的结构是：

文档的完整链接是here

<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 Canvas菜单

2 个答案: