Disable click and darken background when menu is open (div)-CodePudding

I have a side menu that shows up when a button is clicked, it shows up after changing its width. Everything works fine, nonetheless, I want to make the whole body (excepts from the menu) look darken, and if possible to prevent clicks in anything but the menu. When the menu is closed, all should back to normality.

The second part of the JS is used to close the menu, when detects a click outside the menu, it works but I want to make it active only if menu is open, for example:

if(menuOpen)
  {
  $(document).mouseup(function(e)  
    {
    var container = $("mySidenav");
    if (!container.is(e.target) && container.has(e.target).length === 0)  
      {
      closeNav();
      }
    });
  }

var menuOpen = false;

function openNav() {
  document.getElementById("myMenu").style.width = "50%";
  menuOpen = true;
}

function closeNav() {
  document.getElementById("myMenu").style.width = "0%";
  menuOpen = false;
}

$(document).mouseup(function(e) {
  var container = $("mySidenav");

  if (!container.is(e.target) && container.has(e.target).length === 0) {
    closeNav();
  }
});

#myMenu {
  height      : 100%;
  width       : 0;
  position    : fixed;
  z-index     : 1;
  top         : 0;
  right       : 0;
  background  : blue;
  overflow-x  : hidden;
  transition  : 0.5s;
  padding-top : 60px;
  display     : flex;
  align-items : center;
  opacity     : 0.98;
  z-index     : 9;
  color       : #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<p>This is just random information to make my point clear, don't take too much attention to it.</p>
<a href="javascript:void(0)" class="closebtn" onclick="openNav()">Open Menu</a>
<p>Extra random Stuff</p>
<p>You can close the menu clicking elsewhere the page.</p>
<div id="myMenu">
  <ul>
    <li>This is menu stuff</li>
    <li>Menu Stuff 2</li>
    <li>Menu Stuff 3</li>
  </ul>
</div>

CodePudding user response：

add overlay div and toggle it's display property when menu is opened - closed

var menuOpen = false;
const menu = document.getElementById("myMenu")
const overlay = document.getElementById('overlay')

function openNav() {
  menu.style.width = "50%";
  menuOpen = true;
  overlay.style.display = 'block'
}

function closeNav() {
  menu.style.width = "0%";
  overlay.style.display = 'none'
  menuOpen = false;
}

$('#myMenu').click(function(e) {
  closeNav();
  menuOpen = false;

});

#myMenu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background: blue;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  display: flex;
  align-items: center;
  opacity: 0.98;
  z-index: 9;
  color: #fff;
}

#overlay {
  position: fixed;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This is just random information to make my point clear, don't take too much attention to it.</p>
<a href="javascript:void(0)" class="closebtn" onclick="openNav()">Open Menu</a>
<p>Extra random Stuff</p>
<p>You can close the menu clicking elsewhere the page.</p>
<div id="myMenu">
  <ul>
    <li>This is menu stuff</li>
    <li>Menu Stuff 2</li>
    <li>Menu Stuff 3</li>
  </ul>
</div>
<div id="overlay">

</div>