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

I have a side menu that basically works fine, however the background overlay doesn't allow me to click anything on the website. I'm trying to modify the #container_overlay and #container_overlay.on class. Respectively on the first class I always put a parameter that hides the element, while on the second class (on) put a parameter that shows the element. I have been playing with z-inde -999 to 999 so far and it works, only I get an unpleasant effect during the transition. Then I also tried with left 0 to 100% trying to make a slide of the overlay, and even here I didn't like the effect of the transition.

What I'm trying to do is make the overlay appear only with opacity 0 to 1. But when this is off it stays there to cover everything by not letting me click anything. Is there any way to fix?

Sorry but I'm new, I appreciate any response. Thanks.

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 >Close Menu</i>';
        } else {
          x.classList.remove("active");
          menu.innerHTML = '<i >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 >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 >
This is an example of my website content
<a href="https://stackoverflow.com/">Stackoverflow Link</a>
</div>



<button onclick="mobile_menu(event)" ><i >Open Menu</i></button>

<div id="container_overlay">
    <div id="mobile_menu"> 
         
        <div >
            {%  if function( 'is_user_logged_in') %}
            <div >
              <span >Ciao [display_name]</span>
              <span >[display_email]</span>
            </div>
            {% else %}{% endif %}
            <div >
                <div ><a href="https://www.mywebsite.com">Login</a></div>
                
                <div ><a href="https://www.mywebsite.com">Singup</a></div>
            </div>

            <hr  />

            {%  if function( 'is_user_logged_in') %}
            <div >
              <a href="/account">
                <i ></i>
                <span >Dashboard</span>
              </a>
            </div>

            <div >
              <a href="ordini">
                <i ></i>
                <span >I miei ordini</span>
              </a>
            </div>

            <div >
              <a href="libreria">
                <i ></i>
                <span >Downloads</span>
              </a>
            </div>

            <div >
              <a href="impostazioni">
                <i ></i>
                <span >Impostazioni</span>
              </a>
            </div>

            <div >
              <a href="wp-login.php?action=logout">
                <i ></i>
                <span >Logout</span>
              </a>
            </div>
            {% endif %}
        </div>
          
    </div>
</div>

CodePudding user response：

give z-index:-1 to #container_overlay and z-index:999 to #container_overlay.on. hope this helps

CodePudding user response：

I found a solution by looking around on stackoverflow. I found this post: Transitions on the CSS display property some users recommend using the visibility parameter: hidden to visible. It worked for me. Below I put the correct code that I am using.

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 >Close Menu</i>';
        } else {
          x.classList.remove("active");
          menu.innerHTML = '<i >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 >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 >
This is an example of my website content
<a href="https://stackoverflow.com/">Stackoverflow Link</a>
</div>



<button onclick="mobile_menu(event)" ><i >Open Menu</i></button>

<div id="container_overlay">
    <div id="mobile_menu"> 
         
        <div >
            {%  if function( 'is_user_logged_in') %}
            <div >
              <span >Ciao [display_name]</span>
              <span >[display_email]</span>
            </div>
            {% else %}{% endif %}
            <div >
                <div ><a href="https://www.mywebsite.com">Login</a></div>
                
                <div ><a href="https://www.mywebsite.com">Singup</a></div>
            </div>

            <hr  />

            {%  if function( 'is_user_logged_in') %}
            <div >
              <a href="/account">
                <i ></i>
                <span >Dashboard</span>
              </a>
            </div>

            <div >
              <a href="ordini">
                <i ></i>
                <span >I miei ordini</span>
              </a>
            </div>

            <div >
              <a href="libreria">
                <i ></i>
                <span >Downloads</span>
              </a>
            </div>

            <div >
              <a href="impostazioni">
                <i ></i>
                <span >Impostazioni</span>
              </a>
            </div>

            <div >
              <a href="wp-login.php?action=logout">
                <i ></i>
                <span >Logout</span>
              </a>
            </div>
            {% endif %}
        </div>
          
    </div>
</div>