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