0

I'm trying to find multiple ways to close a sidebar menu that pops out from the left side. The idea of this is to have a page with an "Open/Close Menu" button. As expected this button should be able to open and close the menu with clicked, but I also want to include an option of closing it when simply clicking outside the menu bar.

My thought process behind this is to add a div that surrounds all of the content on the page, and gives it a class name of "notMenu". I would define the dimensions of this to be the entire page and give it a z-index of 1. When the menu pops up, it would be on top of .notMenu with a z-index of 2, yet I can't seem to get it to work.

var menuBtn = document.querySelector('.menuBtn');
var sidebar = document.querySelector('.sidebar');
var closeMenuBtn = document.querySelector('.closeMenuBtn');
var notMenu = document.querySelector('.notMenu');


var nav = 'closed'

menuBtn.addEventListener('click', function() {
  if (nav === 'closed') {
    sidebar.style.display = 'block'
    nav = 'open'
  } else {
    sidebar.style.display = 'none'
    nav = 'closed'
  }
});

// closeMenuBtn.addEventListener('click',function(){
//   sidebar.style.display = 'none'
// });


closeMenuBtn.addEventListener('click', function() {
  sidebar.style.display = 'none';
  nav = 'closed';
});

/*
notMenu.addEventListener('click',function(){
    sidebar.style.display = 'none'
    nav = 'closed';
})
*/
h1 {
  text-align: center;
}

.menuBtn {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.closeMenu {
  font-size: 30px;
  z-index: 2;
}

.sidebar {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 300px;
  background: grey;
  display: none;
  z-index: 2;
}

.notMenu {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}
<body>
  <div class="notMenu">

    <h1> Header </h1>

    <div class="sidebar">
      <ul>
        <li><a href=''>Link1</a></li>
        <li><a href=''>Link2</a></li>
        <li><a href=''>Link3</a></li>
      </ul>
      <button class="closeMenuBtn">Close Menu</button>
    </div>

    <button class="menuBtn">Open/Close Menu</button>

    <div class="content1">
      <br><br> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur quia ipsam optio, veritatis corrupti exercitationem quae itaque accusamus voluptas ipsa consequuntur nostrum, culpa, cum dolore incidunt ducimus harum minus doloremque?
    </div>

    <div class="content2">
      <br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quia laboriosam ut accusantium itaque adipisci vitae error provident voluptate, dolorem veniam dignissimos atque accusamus aut rem quos esse fugit voluptas soluta laudantium.
      Nam voluptates maxime sapiente, pariatur voluptatibus mollitia quia.
    </div>

  </div>
  <!--closes .notMenu-->
</body>

CodePen Link

Alternatively, is there a way to do this without designated a new class as .notMenu? I assume there is a possibility to do this with e.target in JS with if statements.

function(e){
  if (e.target !== 'sidebar'){
    sidebar.style.display = 'none'
  }
}

The issue I ran into with this is that e.target returns an object. I'm unable to define which objects represent the sidebar and which ones do not, therefore I can't determine if the area outside the sidebar is being clicked.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
C L
  • 1
  • 1

2 Answers2

0

try this

window.addEventListener('mouseup', function(e) {
   var x = document.querySelector('.sidebar');
   if (event.target != document.querySelector(".icon")) {
      x.style.display = "none";
   }
});
Nitin Lawande
  • 563
  • 1
  • 4
  • 8
0

var menuBtn = document.querySelector('.menuBtn');
var sidebar = document.querySelector('.sidebar');
var closeMenuBtn = document.querySelector('.closeMenuBtn');
var notMenu = document.querySelector('.notMenu');


var nav = 'closed'

menuBtn.addEventListener('click',function(){
    if (nav === 'closed'){
        sidebar.style.display='block'
        nav = 'open'
    }
    else{
        sidebar.style.display = 'none'
        nav = 'closed'
    }
});

closeMenuBtn.addEventListener('click',function(){
    sidebar.style.display = 'none';
    nav = 'closed';
});
// fire event if click is outside of sidebar and menubtn
window.onclick = function(event) {
  if (event.target !== sidebar && event.target !== menuBtn) {
    sidebar.style.display = "none";
    console.log('clicked');
  }
}
h1{
    text-align:center;
  }
  
.menuBtn{
    position:relative;
    left:50%;
    transform:translateX(-50%);
}

.closeMenu{
font-size:30px;
z-index:2;
}

.sidebar{
position:absolute;
top:0;
height:100vh;
width:300px;
background:grey;
display:none;
z-index:2;
}
  
.notMenu{
position:absolute;
top:0;
height:100%;
width:100%;
z-index:1;
}
 <div class="notMenu">

    <h1> Header </h1>
      
    <div class="sidebar">
      <ul>
        <li><a href =''>Link1</a></li>
        <li><a href =''>Link2</a></li>
        <li><a href =''>Link3</a></li>
      </ul>
      <button class="closeMenuBtn">Close Menu</button>
    </div>
    
    <button class="menuBtn">Open/Close Menu</button>
    
    <div class="content1">
      <br><br>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur quia ipsam optio, veritatis corrupti exercitationem quae itaque accusamus voluptas ipsa consequuntur nostrum, culpa, cum dolore incidunt ducimus harum minus doloremque?
    </div>
  
    <div class="content2">
      <br><br>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quia laboriosam ut accusantium itaque adipisci vitae error provident voluptate, dolorem veniam dignissimos atque accusamus aut rem quos esse fugit voluptas soluta laudantium. Nam voluptates maxime sapiente, pariatur voluptatibus mollitia quia.
    </div>
    
    </div>

try this

CodeBug
  • 1,649
  • 1
  • 8
  • 23