How to make navigation menu disappear when clicking anywhere on the screen with HTML, CSS, and javascript
Question
This webpage has a navigation menu that is functioning properly. When the navigation icon is clicked, the menu will appear and the icon will be replaced with an "X" icon. When the "X" is clicked the navigation menu disappears.
However, it would nice to make it so that while the navigation menu is present, clicking anywhere outside of it will make it disappear as well.
Here is a picture for context:
HMTL
<html>
<div id="sideNav">
<nav>
<ul>
<li><a href="#banner">HOME</a></li>
<li><a href="#">COVID-19</a></li>
<li><a href="#service">SERVICES</a></li>
<li><a href="#reviews">REVIEWS</a></li>
<li><a href="#footer">CONTACT</a></li>
</ul>
</nav>
</div>
<div id="menuBtn">
<img src="images/menu.PNG" id="menu">
</div>
</html>
CSS
#sideNav{
width: 200px;
height: 100vh;
position: fixed;
right: -250px;
top:0;
background: #009688;
z-index: 2;
transition: 0.33s;
}
javascript
var menuBtn = document.getElementById("menuBtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")
sideNav.style.right = "-250px";
menuBtn.onclick = function(){
if(sideNav.style.right == "-250px"){
sideNav.style.right = "0";
menu.src = "images/close.PNG";
}
else{
sideNav.style.right = "-250px";
menu.src = "images/menu.PNG";
}
}
3 answers
solution1
1 2020-11-12 08:42:31
To able to click anywhere on the screen and have something, then you should listen for clicks anywhere on the page. Attach an event listener to the document where you check if the clicked element is not a child of the side nav element.
You can check this with the closest() method which is like a querySelector() that runs up the DOM and evaluates each parent.
If there is no hit, then it means that you're not clicking inside the side navigation, so it must be outside the side navigation. Now you know that you can close the menu.
document.addEventListener('click', event => {
// If the clicked element is not a child of #sideNav..
if (event.target.closest('#sideNav') === null) {
// ..then close navigation..
// { your code here }
}
});
solution2
1 ACCPTED 2020-11-12 08:58:00
use event.stopPropagation() and add click event to the document
var menuBtn = document.getElementById("menuBtn") var sideNav = document.getElementById("sideNav") var menu = document.getElementById("menu") menuBtn.onclick = function(e) { //stop propagation of document click e.stopPropagation() //toggle side nav if (!sideNav.classList.contains("open")) { sideNav.classList.add("open"); menu.src = "images/close.PNG"; } else { sideNav.classList.remove("open"); menu.src = "images/menu.PNG"; } } //stop propagation on the side nav element sideNav.onclick = function(e) { e.stopPropagation() } //close menu when document is clicked document.onclick = function() { sideNav.classList.remove("open"); menu.src = "images/menu.PNG"; }
#sideNav { width: 200px; height: 100vh; position: fixed; right: -250px; top: 0; background: #009688; z-index: 2; transition: 0.33s; } /*set the right to 0 for class open*/ #sideNav.open { right: 0; }
<html> <div id="sideNav"> <nav> <ul> <li><a href="#banner">HOME</a></li> <li><a href="#">COVID-19</a></li> <li><a href="#service">SERVICES</a></li> <li><a href="#reviews">REVIEWS</a></li> <li><a href="#footer">CONTACT</a></li> </ul> </nav> </div> <div id="menuBtn"> <img src="images/menu.PNG" id="menu"> </div> </html>
solution3
0 2020-11-12 09:15:45
With jQuery:
$(document).mouseup(function (e){
let sideNav = $("#sideNav");
if (!sideNav.is(e.target) && sideNav.has(e.target).length === 0) {
sideNav.addClass("hide");
$("#menu").removeClass("close");
}
});
Pure js:
window.addEventListener('mouseup', function(e){
var sideNav = document.getElementById("sideNav");
var menu = document.getElementById("menu")
if (e.target.id != 'moreDrop') {
sideNav.classList.add('hide');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.