Question 269621 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to close dropdown by clicking outside?

Codepen: https://codepen.io/vvaciej/pen/abPdEBN

Don’t know how to do a function that closes a menu when active by right click outside

const menuButton = document.querySelector('.fa-bars');
const barsArea = document.querySelector('.bars-area');
const bodyArea = document.querySelector('body');

menuButton.addEventListener('click', function () {
  if (!barsArea.classList.contains('active')) {
        barsArea.classList.add('active');
    } else if (barsArea.classList.contains('active')) {
        barsArea.classList.remove('active');
    }
});

I tried this:

bodyArea.addEventListener('click', function() {
 if (barsArea.classList.contains('active') {
    barsArea.classList.remove('active');
 {
});

But it didn’t work. So I ask you guys maybe somebody knows how to do it right!!!??

Tags:

2

Answers


  1. 0

    You have to change bodyArea.addEventListener to document.addEventListener. Starting with barsArea.classList.contains('active') is a good beginning, and barsArea does not have a target !barsArea.contains(e.target) and the target has not to be a menuButton. so that you can remove the active one like you did barsArea.classList.remove('active');:

    document.addEventListener('click', function (e) {
  if (barsArea.classList.contains('active') &&
      !barsArea.contains(e.target) &&
      e.target !== menuButton) {
    barsArea.classList.remove('active');
  }
});
    Login or Signup to reply.
  2. 0

    you can add a new div say bodyArea to have home content, make height, width as 100vh and add a click listener to it and remove the active class.

    const menuButton = document.querySelector('.fa-bars');
const barsArea = document.querySelector('.bars-area');
const bodyArea = document.querySelector('.bodyArea');


menuButton.addEventListener('click', function () {
  if (!barsArea.classList.contains('active')) {
        barsArea.classList.add('active');
    } else if (barsArea.classList.contains('active')) {
        barsArea.classList.remove('active');
    }
});

bodyArea.addEventListener('click', function(){
    barsArea.classList.remove('active');
}
);
    @charset "UTF-8";
* {
  padding: 0;
  box-sizing: border-box;
  margin: 0;
}

html {
  font-size: 16px;
  font-family: "Lato", sans-serif;
  height: 100%;
}
html body {
  height: 100%;
  background: linear-gradient(to right, rgba(39, 39, 39, 0.72) 100%, transparent), url("/pexels-miguel-á-padriñán-255379.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
html body .navbar-area {
  display: flex;
  position: fixed;
  align-items: center;
  background-color: #272727;
  height: 5em;
  width: 100%;
  margin: auto;
  box-shadow: 0px 0px 15px #272727;
}
html body .navbar-area .navbar {
  padding: 0px 20px 0px 20px;
  width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: space-between;
}
html body .navbar-area .navbar div h1 {
  text-shadow: 0px 0px 10px #fff;
  color: #ddd;
  font-size: 40px;
  transition: 0.5s;
  cursor: pointer;
}
html body .navbar-area .navbar div h1:hover {
  transition: 0.5s;
  transform: scale(1.06);
}
html body .navbar-area .navbar div h2 {
  color: #eee;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 5px;
}
html body .navbar-area .navbar div i {
  font-size: 28px;
  color: lightblue;
  text-shadow: 0px 0px 5px lightblue;
  cursor: pointer;
  transition: 0.5s;
}
html body .navbar-area .navbar div i:hover {
  transform: scale(1.06);
  transition: 0.5s;
}
html body .bars-area {
  display: none;
  position: fixed;
  top: 80px;
  height: 20em;
  background-color: #272727;
  margin: auto;
  border-radius: 0px 0px 10px 10px;
  box-shadow: 0px 0px 15px #272727;
  width: 100%;
}
html body .bars-area .bars {
  min-width: 95%;
  max-width: 100%;
  letter-spacing: 8px;
  color: #eee;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}
html body .bars-area .bars ul {
  font-size: 24px;
  text-align: center;
  height: 100%;
}
html body .bars-area .bars ul li {
  padding: 25px 13px 25px 26px;
  cursor: pointer;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
html body .bars-area .bars ul li i {
  font-size: 24px;
}
html body .bars-area .bars ul li:hover {
  transition: 0.5s;
  background-color: rgb(60, 60, 60);
}
html body .active {
  opacity: 0.8;
  display: block;
}/*# sourceMappingURL=navbar.css.map */
.bodyArea{
height: 100vh;
width: 100vw;
}
/*<!DOCTYPE html>
 <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="navbar.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <script src="https://kit.fontawesome.com/b367f4fd12.js" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&display=swap" rel="stylesheet">
  <title>Document</title>
</head>
<body>
  <div class="navbar-area">
    <div class="navbar">
      <div>
        <h1 onselectstart="return false">Navbar <span style="color: lightblue;">Project</span></h1>
      </div>
      <div>
        <i onselectstart="return false" class="fa-solid fa-bars"></i>
      </div>
    </div>
  </div>
  <div class="bars-area">
    <div class="bars">
      <ul>
        <li onselectstart="return false">home<i class="fa-solid fa-house"></i></li>
        <li onselectstart="return false">about<i class="fa-solid fa-user-circle"></i></li>
        <li onselectstart="return false">projects<i class="fa-solid fa-briefcase"></i></li>
        <li onselectstart="return false">contact<i class="fa-solid fa-address-book"></i></li>
      </ul>
    </div>
  </div>
  <script src="navbar.js"></script>
</body>
</html> */
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <script src="https://kit.fontawesome.com/b367f4fd12.js" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&display=swap" rel="stylesheet">
  <title>Document</title>
</head>
<body>
  <div class="navbar-area">
    <div class="navbar">
      <div>
        <h1 onselectstart="return false">Navbar <span style="color: lightblue;">Project</span></h1>
      </div>
      <div>
        <i onselectstart="return false" class="fa-solid fa-bars"></i>
      </div>
    </div>
  </div>
  <div class="bars-area">
    <div class="bars">
      <ul>
        <li onselectstart="return false">home<i class="fa-solid fa-house"></i></li>
        <li onselectstart="return false">about<i class="fa-solid fa-user-circle"></i></li>
        <li onselectstart="return false">projects<i class="fa-solid fa-briefcase"></i></li>
        <li onselectstart="return false">contact<i class="fa-solid fa-address-book"></i></li>
      </ul>
    </div>
    
  </div>
  <div class="bodyArea">
    Hello
  </div>
  <script src="script.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search