背景菜单覆盖不会让我点击主页上的任何内容

Question

我有一个基本上可以正常工作的侧边菜单，但是背景覆盖不允许我单击网站上的任何内容。我正在尝试修改 #container_overlay 和 #container_overlay.on class。分别在第一个 class 上我总是放置一个隐藏元素的参数，而在第二个 class (on) 上放置一个显示元素的参数。到目前为止，我一直在玩 z-inde -999 到 999 并且它有效，只是在过渡期间我得到了不愉快的效果。然后我也尝试用左 0 到 100% 尝试制作叠加层的幻灯片，即使在这里我也不喜欢过渡效果。

我想做的是让叠加层仅以 0 到 1 的不透明度显示。但是当它关闭时，它会停留在那里以覆盖所有内容，不会让我点击任何东西。有什么办法可以解决吗？

抱歉，我是新来的，非常感谢任何回复。谢谢。

var menu = document.querySelector(".toggle_menu");
    function mobile_menu(e) {
        e.stopPropagation();
        var x = document.getElementById("mobile_menu");
        var y = document.getElementById('container_overlay');
        
        // For var x
        if (!x.classList.contains("active")) {
          x.classList.toggle("active");
          menu.innerHTML = '<i class="icn_toggle fa-solid fa-xmark">Close Menu</i>';
        } else {
          x.classList.remove("active");
          menu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
        }
        // For var y
        if (!y.classList.contains("on")) {
          y.classList.toggle("on");
        } else {
          y.classList.remove("on");
        }
      }
      
        // Permette la chiusura del menu cliccando fuori dall'area
        document.addEventListener("click", function (e) {
        var x = document.getElementById("mobile_menu");
        var y = document.getElementById('container_overlay');
        
        // For var x
        if (e.target.id !== "mobile_menu" && x.classList.contains("active")) {
          x.classList.toggle("active");
          menu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
        }
        // For var y
        if (e.target.id !== "mobile_menu" && y.classList.contains("on")) {
          y.classList.toggle("on");
        }
        
      });

.example_content {
    display: flex;
    align-content: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.example_content > a {
background: gray;
padding: 10px;
color:#fff;
}

/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
}

/*Menu header info*/
.display.name {
    font-size: 15px;
    font-weight: 500;
    color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Logout Header*/
.logout_header {    
    display: flex;
    justify-content: space-between;
}

.btn {
    display: flex;
    width: 49.5%;
    justify-content: center;
    background: #fbfbfb;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 4px;
}

/*Text Link css*/
.user_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: #75777d;
}

.user_menu.item:hover > a {
    color: #2e323a;
}

/*Icon Button Toggle Menu*/
.toggle_menu {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 20%;
    background: none!important;
    box-shadow: none!important;
    position: absolute;
    top: 20px;
    right: 20px;
}

.icn_toggle {
    margin: 0;
    font-size: 26px;
    z-index: 1000;
}

/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
    margin: 0px;
    padding: 0px;
    font-size: 16px;
}

.icn_menu {
    margin-right: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

/* User Menu For header website */
#container_overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    background: #000000d6;
    opacity: 0;
    transition: 0.3s;
}
      
#container_overlay.on {
    opacity: 1;
}
      
.content_menu {
    display: block;
    width: 100%;
}

#mobile_menu {
    left: -100%;
    padding: 20px;
    background-color: #fff;
    min-width: 160px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 999;
    position: relative;
    width: 75%;
    height: 100vh;
    transition: .3s;
}

#mobile_menu.active {
    left: 0;
}

<div class="example_content">
This is an example of my website content
<a href="https://whosebug.com/">Whosebug Link</a>
</div>



<button onclick="mobile_menu(event)" class="toggle_menu"><i class="icn_toggle fa-solid fa-bars">Open Menu</i></button>

<div id="container_overlay">
    <div id="mobile_menu"> 
         
        <div class="content_menu">
            {%  if function( 'is_user_logged_in') %}
            <div class="user_menu header">
              <span class="display name">Ciao [display_name]</span>
              <span class="display mail">[display_email]</span>
            </div>
            {% else %}{% endif %}
            <div class="logout_header">
                <div class="btn login"><a href="https://www.mywebsite.com">Login</a></div>
                
                <div class="btn singup"><a href="https://www.mywebsite.com">Singup</a></div>
            </div>

            <hr class="solid" />

            {%  if function( 'is_user_logged_in') %}
            <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>
            {% endif %}
        </div>
          
    </div>
</div>

Answer 1

将 z-index:-1 交给 #container_overlay，将 z-index:999 交给 #container_overlay.on。希望这有帮助

Answer 2

我通过查看 Whosebug 找到了解决方案。我发现这个 post: Transitions on the CSS display property 一些用户建议使用可见性参数：从隐藏到可见。它对我有用。下面是我使用的正确代码。

var menu = document.querySelector(".toggle_menu");
    function mobile_menu(e) {
        e.stopPropagation();
        var x = document.getElementById("mobile_menu");
        var y = document.getElementById('container_overlay');
        
        // For var x
        if (!x.classList.contains("active")) {
          x.classList.toggle("active");
          menu.innerHTML = '<i class="icn_toggle fa-solid fa-xmark">Close Menu</i>';
        } else {
          x.classList.remove("active");
          menu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
        }
        // For var y
        if (!y.classList.contains("on")) {
          y.classList.toggle("on");
        } else {
          y.classList.remove("on");
        }
      }
      
        // Permette la chiusura del menu cliccando fuori dall'area
        document.addEventListener("click", function (e) {
        var x = document.getElementById("mobile_menu");
        var y = document.getElementById('container_overlay');
        
        // For var x
        if (e.target.id !== "mobile_menu" && x.classList.contains("active")) {
          x.classList.toggle("active");
          menu.innerHTML = '<i class="icn_toggle fa-solid fa-bars">Open Menu</i>';
        }
        // For var y
        if (e.target.id !== "mobile_menu" && y.classList.contains("on")) {
          y.classList.toggle("on");
        }
        
      });

.example_content {
    display: flex;
    align-content: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.example_content > a {
background: gray;
padding: 10px;
color:#fff;
}

/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
}

/*Menu header info*/
.display.name {
    font-size: 15px;
    font-weight: 500;
    color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Logout Header*/
.logout_header {    
    display: flex;
    justify-content: space-between;
}

.btn {
    display: flex;
    width: 49.5%;
    justify-content: center;
    background: #fbfbfb;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 4px;
}

/*Text Link css*/
.user_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: #75777d;
}

.user_menu.item:hover > a {
    color: #2e323a;
}

/*Icon Button Toggle Menu*/
.toggle_menu {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 20%;
    background: none!important;
    box-shadow: none!important;
    position: absolute;
    top: 20px;
    right: 20px;
}

.icn_toggle {
    margin: 0;
    font-size: 26px;
    z-index: 1000;
}

/*Icon Items Menu*/
.icn_menu:before, .icon_menu:after {
    margin: 0px;
    padding: 0px;
    font-size: 16px;
}

.icn_menu {
    margin-right: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

/* User Menu For header website */
#container_overlay {
    visibility: hidden; /*Add This*/
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    background: #000000d6;
    opacity: 0;
    transition: 0.3s;
}
      
#container_overlay.on {
    visibility: visible; /*and this*/
    opacity: 1;
}
      
.content_menu {
    display: block;
    width: 100%;
}

#mobile_menu {
    left: -100%;
    padding: 20px;
    background-color: #fff;
    min-width: 160px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 999;
    position: relative;
    width: 75%;
    height: 100vh;
    transition: .3s;
}

#mobile_menu.active {
    left: 0;
}

<div class="example_content">
This is an example of my website content
<a href="https://whosebug.com/">Whosebug Link</a>
</div>



<button onclick="mobile_menu(event)" class="toggle_menu"><i class="icn_toggle fa-solid fa-bars">Open Menu</i></button>

<div id="container_overlay">
    <div id="mobile_menu"> 
         
        <div class="content_menu">
            {%  if function( 'is_user_logged_in') %}
            <div class="user_menu header">
              <span class="display name">Ciao [display_name]</span>
              <span class="display mail">[display_email]</span>
            </div>
            {% else %}{% endif %}
            <div class="logout_header">
                <div class="btn login"><a href="https://www.mywebsite.com">Login</a></div>
                
                <div class="btn singup"><a href="https://www.mywebsite.com">Singup</a></div>
            </div>

            <hr class="solid" />

            {%  if function( 'is_user_logged_in') %}
            <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>
            {% endif %}
        </div>
          
    </div>
</div>

背景菜单覆盖不会让我点击主页上的任何内容

The background menu overlay doesn't make me click anything on the main page

html

javascript

css

menu