Question

我按照Foundation 6文档创建了一个非画布菜单：http://foundation.zurb.com/sites/docs/off-canvas.html

这是我做的：

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

      <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
        <ul class="vertical menu">
          <li>test1</li>
          <li>test2</li>
          <li>test3</li>
          <li>test4</li>
        </ul>
      </div>

      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas
           data-position="right"></div>

      <div class="off-canvas-content" data-off-canvas-content>
        <div class="title-bar">
          <div class="title-bar-left">
            <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
            <span class="title-bar-title">Zurb</span>
          </div>

          <div class="title-bar-right">
            <button class="menu-icon" type="button" data-toggle="offCanvasRight"></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

但是当我打开菜单时，这就是我得到的：

我可以滚动它并查看我的test1 / 2/3/4，但为什么我有这个结果？

当我点击＆＃39; Toggle Off-canvas＆＃39;

时，我想要的就像我们在基础文档上看到的一样

我把列表放在了错误的地方吗？我非常确定我的框架是最新的，并且我一直在逐步遵循文档，但它没有提供我想要的信息

Answer 1

您的菜单位于正确的位置，您的示例与Foundation 6文档中提供的示例相同。

这似乎是一个设计问题，其中Off Canvas菜单的长度取决于内容的大小。由于页面上没有内容，因此菜单的高度与菜单栏相同。

只要您填充off-canvas-content，菜单就会按预期显示。

点击Here进行演示。

Answer 2

感谢您分享您的代码。对于Foundation 6入门页面，它与ZURB的示例略有不同。 ZURB使用＆＃34; wrap＆＃34;而不是＆＃34;包装＆＃34;。我改变了我的代码以匹配你的瞧！他们的教程是：

http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html

此致：

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

ZURB：

<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">

Foundation 6 Off Canvas，我应该在哪里放置菜单内容？

2 个答案: