Question

0

324

Views

Disable click and darken background when menu is open (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.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>

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

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.com">link for testing when recovered </a>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T03:23:22.933Z

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>

0

324

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

2 answers

0

0

Find remote jobs

Andres GPT