Question

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

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

如何用透明的黑色而不是上半部分来整体涂抹？

Answer 1

我认为这是设计，但有点儿。

当打开非画布菜单时，灰色叠加层的父级占据屏幕高度的100％，并且您通常看不到它下面的任何内容，因为它没有覆盖所有内容，因为该内容不在视口中。

您可以将该包装的高度设置为＆＃39; auto＆＃39;或完全删除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 docs中的示例代码：

使用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;
}

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

基础6画布菜单没有＆＃34;隐藏＆＃34;可见页面

2 个答案: