0

我正在按照 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,但为什么会出现这个结果?

当您单击“切换关闭画布”时,我想要的与我们在基础文档中看到的相同

我把我的清单放错地方了吗?我很确定我的框架是最新的,并且我一直在逐步遵循文档,但它没有提供我想要的那么多信息

4

2 回答 2

3

您的菜单位于正确的位置,并且您的示例等同于 Foundation 6 文档中提供的示例。

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

填充off-canvas-content后,菜单应按预期显示。

单击此处查看演示。

于 2016-02-27T16:12:15.843 回答
0

感谢您分享您的代码。它与 ZURB 为 Foundation 6 起始页提供的示例略有不同。ZURB 使用“wrap”而不是“wrapper”。我更改了我的代码以匹配您的代码,瞧!他们的教程位于:

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">
于 2017-03-09T21:33:44.310 回答