CODEWITHSUNDEEP
javascripthtmlcssnavigation
minTwin
minTwin

Reputation: 1393

How to make navigation menu disappear when clicking anywhere on the screen with HTML, CSS, and javascript

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:

enter image description here

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";
        }
    }

Upvotes: 0

Views: 3893

Answers (3)

ibrahim s
ibrahim s

Reputation: 313

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>

Upvotes: 1

Webfeya
Webfeya

Reputation: 313

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');
    }
});

Upvotes: 0

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20954

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 }
  }
});

Upvotes: 1

Related Questions