Foundation 6 off-canvas-menu 没有 "hide" 可见页面

Question

我正在使用 Foundation 6 为小视口构建一个关闭-canvas-菜单，但我无法覆盖整个可见页面区域。关闭-canvas-菜单下方的右侧区域没有背景不透明度。

要尝试它，只需将浏览器视口宽度调整为小于 640 像素（小视口），然后单击左上角的汉堡图标。

link to website

我怎样才能用透明的黑色而不是上半部分涂上整个颜色？

Answer 1

我认为这是设计使然，但有点问题。

当关闭-canvas 菜单打开时，灰色覆盖层的父层占据了屏幕高度的 100%，您通常看不到它下面的任何东西，注意到它没有覆盖所有内容，因为该内容超出了视口。

您可以将该包装纸的高度设置为 'auto' 或完全删除高度的 100% 值。需要注意的是，当您这样做时，视口中的所有内容都会滚动，而不仅仅是关闭-canvas 菜单中的内容。

// This element needs to have the height override
<div class="off-canvas-wrapper-inner is-off-canvas-open is-open-left" data-off-canvas-wrapper="">...</div>

.off-canvas-wrapper, .off-canvas-wrapper-inner {
    height: 100% <-- remove this, override it, or set to 'auto'.
}

Answer 2

使用 Javascript，您可以侦听 opened.zf.offcanvas 事件并手动将灰色覆盖添加到具有 off-canvas-content class 的标签。相反，侦听 closed.zf.offcanvas 事件并删除您在触发时添加的 css。

使用 Foundation 文档中的示例代码：

与 HTML:

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

然后：

$('.off-canvas-wrapper').on('opened.zf.offcanvas', function() {
  $('.off-canvas-content').addClass('grey-out');
});
$('.off-canvas-wrapper').on('closed.zf.offcanvas', function() {
  $('.off-canvas-content').removeClass('grey-out');
});

grey-out class:

.grey-out {
  background: rgba(60,60,60,0.75) !important;
  z-index: 1000;
}

我没有测试这个，但你明白了。

Foundation 6 off-canvas-menu 没有 "hide" 可见页面

Foundation 6 off-canvas-menu doesn't "hide" visible page

html

javascript

css

jquery

zurb-foundation