如何将叠加层添加到 sidenav 菜单？

Question

我有一个带有一些 Js 的 sidenav 菜单，我想添加叠加层，但我不知道该怎么做，抱歉，我是初学者。我尝试了几种方法都没有成功，即使是关闭所有内容的div，但后来我把它拿掉了，因为它破坏了菜单功能。有人能帮我吗？感谢您的回复，谢谢。

 const toggle = document.getElementById('toggle');
    const sidenav = document.getElementById('sidenav');
    
    document.onclick = function(e){
        if(e.target.id !== 'sidenav' && e.target.id !== 'toggle' ) {
          toggle.classList.remove('active');
          sidenav.classList.remove('active');
        }
    }
    
    toggle.onclick = function(){
        toggle.classList.toggle('active');
        sidenav.classList.toggle('active');
    }

#toggle {
    display: flex;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    font-size: 18px;
    margin: 10px;
    padding: 10px;
    color: black;
    border: 1px solid black;
}

#toggle::before {
    font-family: fontAwesome;
    content:'Menu Closed';
    color: black;
    
}

#toggle.active::before {
    font-family: fontAwesome;
    content:'Menu Open';
    color: black;
}

/*Sidebar*/
.sidenav_box {
    margin-top: 10%;
    padding: 25px;
}

#sidenav {
    position: fixed;
    top: 0;
    left:-100%;
    width: 80%;
    height: 100vh;
    background: black;
    transition: 0.3s;
    z-index: 999;
}

#sidenav.active {
    left: 0px;
    width: 80%;
}

<div id="toggle"></div>

<div id="sidenav">
    
 <div class="sidenav_box"> 
  <div class="user_menu header">
        <span class="display name">Ciao [display_name]</span>
        <span class="display mail">[display_email]</span>
    </div>   
      
     <hr class="solid">  
     
    <div class="user_menu item">
        <a href="/account">
         <i class="icn_menu fa-regular fa-user"></i>
         <span class="link_text">Dashboard</span>
        </a>
    </div>
    
     <div class="user_menu item">
        <a href="ordini">
         <i class="icn_menu fa-regular fa-basket-shopping"></i>
         <span class="link_text">I miei ordini</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="libreria">
         <i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
         <span class="link_text">Downloads</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="impostazioni">
         <i class="icn_menu fa-regular fa-gear"></i>
         <span class="link_text">Impostazioni</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="wp-login.php?action=logout">
         <i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
         <span class="link_text">Logout</span>
        </a>
    </div>
   </div>
   
 </div>

Answer 1

我添加叠加层的方式是将所有内容包装在另一个 div 中并使用 ::after ，然后我为 after 元素着色，然后我为其中的内容应用 z-index显示在顶部，像这样 -

    header .nav-div {
    z-index: 1004;
    margin-left: 0;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    transition: clip-path 0.3s linear;
  }
  header .nav-div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.75;
  }
  header .nav-div.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  header .nav-div .close {
    display: inline-block;
    height: 2rem;
    position: absolute;
    top: 2rem;
    right: 2rem;
    cursor: pointer;
  }
  header .nav-div .nav-div-mobile {
    z-index: 1005;
    background-color: white;
    height: 100%;
    width: 70%;
  }

此处 .nav-div::after 用作我的叠加层。

如果，我在 .nav-div 上设置不透明度，这将减少其中所有内容的不透明度。因此，我将不透明度放在 ::after 上，它覆盖了整个 .nav-div，而我的主要导航标签在我的 .nav-div-mobile 中（用于额外的样式目的）。

将 .nav-div-mobile 放在 .nav-div 之上很重要，否则它将位于彩色 ::after 元素后面

Answer 2

当您说 div 带叠加层时，您的意思是让导航菜单的背景像这样 semi-transparent 吗？如果是这样，您只需要 opacity 属性，但如果您希望它出现在其他元素（如导航项）后面，则可能需要将 z-index 下拉。

const toggle = document.getElementById('toggle');
const sidenav = document.getElementById('sidenav');
const overlay = document.getElementById('contentOverlay');

document.onclick = function(e) {
  if (e.target.id !== 'sidenav' && e.target.id !== 'toggle') {
    toggle.classList.remove('active');
    sidenav.classList.remove('active');
    overlay.classList.remove('active');
  }
}

toggle.onclick = function() {
  toggle.classList.toggle('active');
  sidenav.classList.toggle('active');
  overlay.classList.toggle('active');
}

#toggle {
  display: flex;
  align-content: center;
  justify-content: flex-end;
  align-items: center;
  font-size: 18px;
  margin: 10px;
  padding: 10px;
  color: black;
  border: 1px solid black;
}

#toggle::before {
  font-family: fontAwesome;
  content: 'Menu Closed';
  color: black;
}

#toggle.active::before {
  font-family: fontAwesome;
  content: 'Menu Open';
  color: black;
}


/*Sidebar*/

.sidenav_box {
  margin-top: 10%;
  padding: 25px;
}

#sidenav {
  position: fixed;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100vh;
  background: black;
  opacity: 1;
  transition: 0.3s;
  z-index: 999;
}

#sidenav.active {
  left: 0px;
  width: 50%;
}

#contentOverlay {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  opacity: 1;
  object-fit: cover;
  transition: 0.3s;
  z-index: 1;
}

#contentOverlay.active {
  left: 0px;
  width: 100%;
}

<div id="toggle"></div>

<div id="sidenav">
  <div class="sidenav_box">
    <div class="user_menu header">
      <span class="display name">Ciao [display_name]</span>
      <span class="display mail">[display_email]</span>
    </div>
  </div>

  <hr class="solid">

  <div class="user_menu item">
    <a href="/account">
      <i class="icn_menu fa-regular fa-user"></i>
      <span class="link_text">Dashboard</span>
    </a>
  </div>

  <div class="user_menu item">
    <a href="ordini">
      <i class="icn_menu fa-regular fa-basket-shopping"></i>
      <span class="link_text">I miei ordini</span>
    </a>
  </div>

  <div class="user_menu item">
    <a href="libreria">
      <i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
      <span class="link_text">Downloads</span>
    </a>
  </div>

  <div class="user_menu item">
    <a href="impostazioni">
      <i class="icn_menu fa-regular fa-gear"></i>
      <span class="link_text">Impostazioni</span>
    </a>
  </div>

  <div class="user_menu item">
    <a href="wp-login.php?action=logout">
      <i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
      <span class="link_text">Logout</span>
    </a>
  </div>
</div>
<img src="https://i.imgur.com/rsSBOSd.jpeg" id="contentOverlay" />

如何将叠加层添加到 sidenav 菜单？

How to add overlay to sidenav menu?

html

javascript

css

overlay

menu