Tengo un menú lateral que aparece cuando se hace clic en un botón, aparece después de cambiar su ancho. Todo funciona bien, sin embargo, quiero que todo el cuerpo (excepto en el menú) se vea oscurecido y, si es posible, evitar clics en cualquier cosa que no sea el menú. Cuando se cierra el menú, todo debería volver a la normalidad.
La segunda parte del JS se usa para cerrar el menú, cuando detecta un clic fuera del menú, funciona, pero quiero activarlo solo si el menú está abierto, por ejemplo:
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>agregue superposición div y alterne su propiedad de visualización cuando el menú está abierto - cerrado
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>Lo haré de esta manera:
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>