Mouse onclick event target (Moving sidenavifation)

Question

I want the sidebar to close when cicked outside the sidebar.

Right now the sidebar closes when pressed inside the sidebar.

Please checkout the code below. I have a code sample below.

  var mySidenav = document.getElementById("mySidenav");
  
  var navigationOpen = false;

  function openNav() {
    document.getElementById("mySidenav").style.width = "300px";
    document.getElementById("navIcon").style.visibility = "hidden";
    navigationOpen = true;
  }

  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("navIcon").style.visibility  = "visible";
    navigationOpen = false;
  }
    //Instead of when clicking on the nav to close
    // Make it close when clicking outside of the nav
    window.onclick = function(event) {
          if (event.target == mySidenav) {
        console.log("mouse click2")
        closeNav();
      }
      
      
  }

.sidenav {
    padding-top: 60px;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff000;
    transition: 0.5s;
}

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

  <div id="navIcon" onclick="openNav()"> &#9776;</div>
  
<div id="mySidenav" class="sidenav">

  
</div>
</body>
</html>

Thank you for your time!

Does this answer your question? [Close the menu on click](https://stackoverflow.com/questions/42201156/close-the-menu-on-click) — Calvin Nunes, Feb 13 '20 at 20:41
Hi Rai, Not really I got the nav opening working when pressing "open" and the closing working when pressing a link. I want to close the nav when clicking outside of the navigator — AttackTheWar, Feb 13 '20 at 20:46

Ian Guimarães · Answer 1 · 2020-02-13T20:48:13.943

0

Maybe you want to try this


    if (event.target !== mySidenav) {
      console.log("mouse click2")
      closeNav();
      return;
    }
    openNav();

edited Feb 13 '20 at 20:48

answered Feb 13 '20 at 20:43

Ian Guimarães

371
3
12

Hi @ian When using that I wont be able to open my nav – AttackTheWar Feb 13 '20 at 20:45
This edit makes it happen??? Sorry to ask, but I'm not running you're code – Ian Guimarães Feb 13 '20 at 20:49
Hi Ian thanks again, unfortutantly It did not work. – AttackTheWar Feb 13 '20 at 21:04
Hi , I have updatd my questiona my code to make it a little bit more clear – AttackTheWar Feb 13 '20 at 21:36

upsidedownwf · Answer 2 · 2020-02-13T21:03:46.103

0

function Opennav(). 
   {document.getElementById('mySidenav').style.display = 
      'block'; // show
     }
function Closenav(){
    document.getElementById('mySidenav').style.display = 
        'none'; // hide
       }

Update your function:

 var sidenav= document.getElementById('mySidenav');


  window.onclick = function(event) {
    console.log("mouse click")
      if (event.target == sidenav) {
         console.log("mouse click2")
       closeNav();
       }
     }

edited Feb 13 '20 at 21:03

answered Feb 13 '20 at 20:52

upsidedownwf

134
1
3
12

Hi thanks for the input, I want to use the animation to close the nav – AttackTheWar Feb 13 '20 at 21:03
@AttackTheWar I have updated the code . you can try it out and use '.style.width' instead of '.style.display' that I used here – upsidedownwf Feb 13 '20 at 21:11
Hi , I have updatd my questiona my code to make it a little bit more clear – AttackTheWar Feb 13 '20 at 21:36
have you achieved your goal now, because its not really clear to me, you want it to sidebar to close when you click outside the sidebar, has it been achieved or not? – upsidedownwf Feb 13 '20 at 22:06
I want the sidebar to close when cicked outside the sidebar. This is not achieved. – AttackTheWar Feb 13 '20 at 22:12

score 0 · Accepted Answer · answered Feb 13 '20 at 23:59

I added some style code and change bit of js code. try it

    var mySidenav = document.getElementById("mySidenav");

    var navigationOpen = false;

    function openNav() {
        document.getElementById("mySidenav").style.width = "300px";
        document.getElementById("navIcon").style.visibility = "hidden";
        navigationOpen = true;
    }

    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("navIcon").style.visibility  = "visible";
        navigationOpen = false;
    }
    //Instead of when clicking on the nav to close
    // Make it close when clicking outside of the nav
    window.onclick = function(event) {
        if (event.target == document.body) {
            closeNav();
        }
    }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .sidenav {
            padding-top: 60px;
            overflow-x: hidden;
            overflow-y: auto;
            height: 100%;
            width: 0;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #fff000;
            transition: 0.5s;
        }
        #navIcon {
            padding: 4px 16px;
            cursor: pointer;
        }

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>

<div id="navIcon" onclick="openNav()"> &#9776;</div>

<div id="mySidenav" class="sidenav">


</div>

</body>
</html>

Mouse onclick event target (Moving sidenavifation)

3 Answers3