Closing an overlay window in HTML outside it as well

Here, I am trying to open an overlay window. Then, to close the window outside the window as well which I have seen in some websites. But, my attempt is not working. As soon as, I take out the // on closeNav() on last step of my JavaScript, the opening the window doesn’t work. Thanks for your helps.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    html,
    body {
    margin: 0;
        }
    .sidenav {
        height: 72%;
        width: 0;
        position: fixed;
        top: 0;
        right:0;
        scroll-margin-right: 0;
        background-color: #6a6c6d;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top:50px;
        }
    .sidenav a {
        padding: 8px 8px 10px 15px;
        text-decoration: none;
        font-size: 16px;
        color: black ;
        display: block;
        transition: 0.3s;
        }
    .sidenav a:hover {
        color: #f1f1f1;
        }
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 50px;
        }
    #container{
        display: flex;
        padding: 0px 0px 0px 0px;
        }
    @media screen and (max-height: 450px) {
        .sidenav {padding-top: 0px;}
        .sidenav a {font-size: 60px;}  
        }
</style>
</head>
<body>
<div id="mySidenav">
    <div class="sidenav" id="sidenav">
        <a href="javascript:void(0)"  id="closebtn" class="closebtn" onclick="closeNav()"> &times;</a>
           <a href="xx.html">  Mission</a>
        <a href="#">Services</a>
    </div>
</div>
<div  id="BodyTexts">
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">
        &#9776;Menu</span>
    <p>Learning javascript aa</p>
</div>
<script>
    // var sidenav = document.getElementById("sidenav"); 
    var OStatus;
      
    function openNav() {
        document.getElementById("sidenav").style.width = "30%";
        OStatus = "opened"
    }
    function closeNav() {
        document.getElementById("sidenav").style.width = "0";
        OStatus = "      "
    }
    window.onclick = function(event) {
       if ( OStatus = "opened" && event.target != sidenav )  {
        //  closeNav();
       Ostatus = "      "
       }
    }
    
</script>  
</body> 
</html>

The onclick on the nav or the button will bubble up to the window so you cancel out the menu and close clicks straight away.

Remove the online click handlers and then do it all from the one window event and detect where the event originated and act accordingly.

e.g.

Remove the inline handlers and put a class on the buttons to identify them.

<a href="javascript:void(0)" id="closebtn" class="closebtn"> &times;</a>

and

<span class="openmenu" style="font-size:30px;cursor:pointer">
      &#9776;Menu</span>

The amend the js ass follows.


    var sidenav = document.getElementById("sidenav");
    var OStatus;

    function openNav() {
      sidenav.style.width = "30%";
      OStatus = "opened"
    }

    function closeNav() {
      sidenav.style.width = "0";
      OStatus = "";
    }
    window.onclick = function(event) {
      if (OStatus == "opened" && event.target != sidenav) {
        closeNav();
        Ostatus = "";
      }
      if (event.target.classList.contains('openmenu')) {
        openNav();
      }
      if (event.target.classList.contains('closebtn')) {
        closeNav();
      }
}

Note that = is an assignment operator not an is equal to.
if (OStatus = "opened" ... That will always be true as you are assigning it.

It should be if (OStatus == "opened" … or if (OStatus === "opened" ...

It would be better to use the button element for buttons (you even called it a button) rather than anchors (you can style them to look as you want). Also try not to use inline styles even for small items as that makes debugging awkward.

Lastly it would be better to toggle the nav with a class rather than writing directly into the style attribute.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.