Foundation 6 画布外菜单不会“隐藏”可见页面

Question

我正在为 Foundation 6 的小视口构建一个画布外菜单，但我无法重叠整个可见页面区域。 画布菜单下方的右侧区域没有背景不透明度。

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

网站链接

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

Answer 1

我认为这是设计使然，但有点马车。

当关闭画布菜单时，灰色覆盖的父级占据屏幕高度的 100%，并且您通常看不到它下方的任何内容以注意到它没有覆盖所有内容，因为该内容超出了视口.

您可以将该包装器上的高度设置为“自动”或完全删除高度的 100% 值。 需要注意的是，当您执行此操作时，视口中的所有内容都将滚动，而不仅仅是画布菜单中的内容。

// 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类的标签。 相反，监听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类：

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

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