Question

当单击打开按钮时，将显示侧面菜单，我将用我设置的背景色覆盖整个身体。叠加层覆盖了菜单栏以外的所有内容。有没有解决的办法？谢谢。

$(document).ready(function() {

  $("#openNav").click(function() {
    $("#mySidenav").css({
      'width': '20%'
    });
    $("body").css({
      'background-color': 'rgba(0, 0, 0, 0.5)',
      'z-index': ' 10000'
    });
  });


  $(".closebtn").click(function() {
    $("#mySidenav").css({
      'width': '0'
    });
    $("body").css({
      'background-color': 'rgba(0, 0, 0, 0)'
    });
  });

});

body {
  font-family: "Lato", sans-serif;
  /* background-color: rgba(0, 0, 0, 0.5); */
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  border-style: solid;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>



<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div style="width: 100%; text-align: right; background-color: white; height:100px; border-style: solid; poisition: relative" id="openNav">
  <span style="font-size:30px;cursor:pointer">&#9776; open</span>
</div>

我尝试将主体的z-index设置为很高，但这是行不通的。

Answer 1

与其尝试更改主体颜色，不如向其添加类。

// open the menu
$("#openNav").click(function() {
    $("#mySidenav").css({
      'width': '20%'
    });
    $("body").addClass('menu-open');
  });
// close the menu
$(".closebtn").click(function() {
    $("#mySidenav").css({
      'width': '0'
    });
    $("body").removeClass('menu-open');
  });

然后将其添加到您的CSS：

body.menu-open::after {
  content:'';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

这将创建一个叠加层以显示在主体顶部，但是由于z索引，它将出现在侧面菜单下。

Answer 2

是的，有。

您必须使用另一个元素作为覆盖图，并具有固定的位置和整个文档的大小；然后，您应为应该位于其上方的元素分配较高的z-index值，并为应位于其下方的元素分配较低的z-index值。检查代码段。

$(document).ready(function() {

  $("#openNav").click(function() {
    $("#mySidenav").css({
      'width': '20%'
    });
    $(".overlay").css({
      'position': 'fixed',
      'display': 'block',
      'background-color': 'rgba(0, 0, 0, 0.5)',
      'z-index': ' 2',
      'height': '100%',
      'width': '100%'
    });
  });


  $(".closebtn").click(function() {
    $("#mySidenav").css({
      'width': '0'
    });
    $(".overlay").css({
      'display' : 'none',
      'background-color': 'rgba(0, 0, 0, 0)'
    });
  });

});

body {
  font-family: "Lato", sans-serif;
  /* background-color: rgba(0, 0, 0, 0.5); */
}

.overlay {
  display: none;
  height: 100%;
  width: 100%;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  border-style: solid;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="overlay">
</div>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div style="width: 100%; text-align: right; background-color: white; height:100px; border-style: solid; poisition: relative; z-index: 1" id="openNav">
  <span style="font-size:30px;cursor:pointer">&#9776; open</span>
</div>

覆盖层不覆盖NavBar

2 个答案: