Open close sidebar clicking anywhere

Question

I need to create a sidebar that can be able to close it clicking on the X button and clicking anywhere I am able to close the navbar by clicking on the X button in the sidebar. How can I change my javascript to be able to close the sidebar by clicking anywhere on the page?

 function openNav() {
  document.getElementById('mySidenav').style.width="250px";
 }
 function closeNav() {
  document.getElementById('mySidenav').style.width="0"
 }

 
 .sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  background-color: #111;
 }

 .sidenav a{

  display: block;
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  transition: 0.3s;
 }
 
 .sidenav a:hover{

  color: #F1F1F1;

 } 

 .sidenav .closebtn{
  
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 35px;
  margin-left: 50px;
 }

 @media screen and (max-height: 450px){

  .sidenav{padding-top: 15px;}
  .sidenav a{font-size: 18px;}

 }

<body>


<div id="mySidenav" class="sidenav">
 
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 <a href="#">CARRITO 1</a>
 <a href="#">CARRITO 2</a>

</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" onclick="openNav()">cart</span>




</body>

See https://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element Most of it is jQuery, but I think there are some plain JS answers as well. — Barmar, Jun 27 '19 at 21:20

score 0 · Accepted Answer · answered Jun 27 '19 at 21:34

You can listen to clicks on your entire page through:

document.body.onclick = function () {
  // Close Nav here
}

However, doing this will cause your entire page to try to close the nav when clicked – even your open button.

You can exclude certain elements from listening to events set on parent elements through the e.stopPropagation() method. See an example implementation below.

Please also note that your body will not start off 100% of your window's height due to the lack of content, and thus will not respond to clicks everywhere on the page. You can fix this by using setting the CSS property body: 100vh.

function openNav(e) {
  e.stopPropagation();
  document.getElementById('mySidenav').style.width="250px";
}
 
function closeNav(e) {
  e.stopPropagation();
  document.getElementById('mySidenav').style.width="0"
}

document.body.onclick = closeNav;
document.getElementsByClassName('openbtn')[0].onclick = openNav;
document.getElementById('mySidenav').onclick = openNav;
document.getElementsByClassName('closebtn')[0].onclick = closeNav;

body {
  height: 100vh;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  background-color: #111;
}

.sidenav a {
  display: block;
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  transition: 0.3s;
}
 
.sidenav a:hover {
  color: #F1F1F1;
} 

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 35px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav{padding-top: 15px;}
  .sidenav a{font-size: 18px;}
}

<body>


<div id="mySidenav" class="sidenav">
 
 <a href="javascript:void(0)" class="closebtn">&times;</a>
 <a href="#">CARRITO 1</a>
 <a href="#">CARRITO 2</a>

</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" class="openbtn">cart</span>

</body>

score 0 · Answer 2 · answered Jun 27 '19 at 21:43

Easily you can add overlay element when the sidebar is shown.

function overlay(isShow){
  var elm = document.getElementById('overlay')
  if (isShow) {
    elm.style.display = 'block';
  } else {
    elm.style.display = 'none';
  }
}

function openNav() {
  overlay(true);
 document.getElementById('mySidenav').style.width="250px";
}

function closeNav() {
  overlay(false);
 document.getElementById('mySidenav').style.width="0"
}

 .sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  background-color: #111;
 }

 .sidenav a{

  display: block;
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  transition: 0.3s;
 }
 
 .sidenav a:hover{

  color: #F1F1F1;

 } 

 .sidenav .closebtn{
  
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 35px;
  margin-left: 50px;
 }
  
  #overlay{
    z-index: 2;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
  }

 @media screen and (max-height: 450px){

  .sidenav{padding-top: 15px;}
  .sidenav a{font-size: 18px;}

 }

<div id="mySidenav" class="sidenav">
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 <a href="#">CARRITO 1</a>
 <a href="#">CARRITO 2</a>
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" onclick="openNav()">cart</span>
<div id="overlay" onclick="closeNav()"></div>

Open close sidebar clicking anywhere

2 Answers2