javascript - 如何让抽屉出现在我网页其余部分的上方，以便看不到和无法点击底层元素？-6ren

javascript - 如何让抽屉出现在我网页其余部分的上方，以便看不到和无法点击底层元素？

转载作者：太空宇宙更新时间：2023-11-04 10:36:34

我有一个带有抽屉的网页。当我点击汉堡包时，一个抽屉滑出，里面有菜单项。但是，底层 Web 元素仍然可见且可点击。我希望它们不被看到或无法点击。这是我的抽屉代码:

<nav id="drawer" class="nav">
      <div id="drawer-hamburger" class="box">
        <a id="menu2">
          <img class="menu-item" src="./images/threelines.png" alt="hamburger">
        </a>
      </div>
      <div id="drawer-item" class="box text-center">
        <a href="./home.html"><img class="menu-item" src="./images/account_blue.png" alt="Home Icon"></a>         
        <p><a href="./account.html">Account</a></p>          
      </div>
      <div id="drawer-item" class="box text-center">
          <a href="./browse.html"><img class="menu-item" src="./images/browse_blue.png" alt="Settings Icon"></a>
          <p><a href="./browse.html">Browse</a></p>
      </div>
      <div id="drawer-item" class="box text-center">            
          <a href="./settings.html"><img class="menu-item" src="./images/settings_blue.png" alt="Browse Icon"></a>
          <p><a href="./settings.html">Settings</a></p>
      </div>
      <div id="drawer-item" class="box text-center">
          <a href="./history.html"><img class="menu-item" src="./images/history_blue.png" alt="History Icon"></a>
          <p><a href="./history.html">Orders</a></p>            
      </div> 
    </nav>        
    <div id="main" class="box text-left">
      <a id="menu">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
        </svg>
      </a>          
    </div>

这是对应的css:

    nav {
  width: 33%;
  height: 100%;
  position: absolute;
  /* This trasform moves the drawer off canvas. */
  -webkit-transform: translate(100px, 0);
  transform: translate(-200px, 0);
  /* Optionally, we animate the drawer. */
  transition: transform 0.3s ease;
  background-color: #cc0000;
  opacity:1;
  box-sizing: border-box;
  z-index: 3;

}
nav.open {
  -webkit-transform: translate(-10px, 0);
  transform: translate(0, 0);
}

最佳答案

我假设当您说“底层 Web 元素仍然可见且可点击”时，您指的是#main，因此当用户切换导航时我将该区域隐藏且不可点击。

$(function(){
  $("nav").on("click", function(){
    $(this).toggleClass("open")
    $("#main").toggleClass("hide")
  })
})

nav {
  width: 33%;
  height: 100%;
  position: absolute;
  /* This trasform moves the drawer off canvas. */
  -webkit-transform: translate(100px, 0);
  transform: translate(-200px, 0);
  /* Optionally, we animate the drawer. */
  transition: transform 0.3s ease;
  background-color: #cc0000;
  opacity:1;
  box-sizing: border-box;
  z-index: 3;

}
nav.open {
  -webkit-transform: translate(-10px, 0);
  transform: translate(0, 0);
}
.hide{
  opacity: 0;
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
	<nav id="drawer" class="nav">
	      <div id="drawer-hamburger" class="box">
	        <a id="menu2">
	          <img class="menu-item" src="./images/threelines.png" alt="hamburger">
	        </a>
	      </div>
	      <div id="drawer-item" class="box text-center">
	        <a href="./home.html"><img class="menu-item" src="./images/account_blue.png" alt="Home Icon"></a>         
	        <p><a href="./account.html">Account</a></p>          
	      </div>
	      <div id="drawer-item" class="box text-center">
	          <a href="./browse.html"><img class="menu-item" src="./images/browse_blue.png" alt="Settings Icon"></a>
	          <p><a href="./browse.html">Browse</a></p>
	      </div>
	      <div id="drawer-item" class="box text-center">            
	          <a href="./settings.html"><img class="menu-item" src="./images/settings_blue.png" alt="Browse Icon"></a>
	          <p><a href="./settings.html">Settings</a></p>
	      </div>
	      <div id="drawer-item" class="box text-center">
	          <a href="./history.html"><img class="menu-item" src="./images/history_blue.png" alt="History Icon"></a>
	          <p><a href="./history.html">Orders</a></p>            
	      </div> 
	    </nav>        
	    <div id="main" class="box text-left">
	      <a id="menu">
	        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
	          <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
	        </svg>
	      </a>          
	    </div> 
</body>