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=".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>

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./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>

• javascript
• html
• jquery
• css

Share Improve this question Follow edited Sep 24, 2021 at 17:09 Mister Jojo 22.6k66 gold badges2525 silver badges4444 bronze badges asked Sep 24, 2021 at 17:05 Alexandro GilesAlexandro Giles 49255 silver badges1919 bronze badges 3

• I can do this with JS code, but not with jQuery code ... – Mister Jojo Commented Sep 24, 2021 at 17:16
• You are wele Mister Jojo, nowadays jQuery is in disuse – Alexandro Giles Commented Sep 24, 2021 at 19:15
• 1 I added my JS answer. alas you did not respond to my message until 2 hours later ... :/ – Mister Jojo Commented Sep 24, 2021 at 23:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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./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>

I will do that this way:

const
  BtMenu      = document.querySelector('a.closebtn')
, myMenu      = document.querySelector('#myMenu')
, menuOpen = () => myMenu.classList.contains('open');
  ;

BtMenu.onclick = e => setMenuOpen(e, true);
myMenu.onclick = e => setMenuOpen(e, false);

// css  pointer-events : none;  doesn't work the same way!
document.querySelector('#overlay').onclick = e => e.stopPropagation();

function setMenuOpen(e, onOff)
  {
  e.preventDefault()
  myMenu.classList.toggle('open',onOff)

  if (e.target.matches('#myMenu li'))
    {
    console.log(`menu call : ${e.target.textContent }`)  
    setTimeout(console.clear, 2000)
    }
  }
  
// if ( menuOpen() ) { .... }

#myMenu {
  --mOpen     : 60%;  /* or 50% as yours */
  height      : 100%;
  width       : 0;
  position    : fixed;
  top         : 0;
  right       : 0;
  background  : rgba(0, 0, 255, 0.98);
  overflow-x  : hidden;
  transition  : 0.5s ease-in-out;
  padding-top : 60px;
  display     : flex;
  align-items : center;
  color       : #fff;
  z-index     : 9;
  }
#myMenu > #overlay {
  position       : fixed;
  bottom         : 0;
  left           : 0;
  width          : 0;
  height         : 0;
  background     : rgba(31, 26, 61, 0.74);
  transition     : 0.5s ease-in-out;
  display        : block;
  }
#myMenu.open {
  width : var(--mOpen);
  }
#myMenu.open > #overlay {
  width  : calc( 100% - var(--mOpen) );
  height : 100%;
  }
#myMenu li:hover {
  cursor : pointer;
  color  : red; 
  }
  
/* for snippet console information */
.as-console-row { background-color: yellow; }

<nav id="myMenu">
  <div id="overlay"></div>
  <ul>
    <li>This is menu stuff</li>
    <li>Menu Stuff 2</li>
    <li>Menu Stuff 3</li>
  </ul>
</nav>

<p>This is just random information to make my point clear, don't take too much attention to it.</p>
<a href="" class="closebtn">Open Menu</a>


<p>Extra random Stuff</p>
<p>You can close the menu clicking elsewhere the page.</p>

<a href="https://stackoverflow.">link for testing when recovered </a>