hide menu even when click outside or anywhere on webpage

Question

This is my menubar code. it works fine. But, I want to implement one thing that at present, when I click outside of the menubar it does not hide or close. I want to hide the menubar even when I click anywhere on the webpage when menu bar active.

function openNav() {
    document.getElementById("mySidenav").style.width = "50%";
}
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
(function ($) {
    // Instantiate MixItUp:
    // $('Container').mixItUp();
    // Add smooth scrolling to all links in navbar + footer link
    $(".sidenav a").on('click', function(event) {
        event.preventDefault();
        var datanew= this.href;
        var str2 = '.html';
        if(datanew.indexOf(str2) != -1){
            window.location.href = datanew;
        }else{
            var hash = this.hash;
            $('html, body').animate({scrollTop: $(hash).offset().top}, 
            900, function(){
                alert(window.location);
                window.location.hash = hash;
            });
        }
    });
})(jQuery);

.sidenav {
    height: 100%;
    width: 0;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #ef4f50;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
    /*max-height: 551px;*/
}
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #ffffff;
    display: block;
    transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}
.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}
.menu-icon
{
    color: #114576;
    font-size: 30px;
    margin-top: 40px;
    margin-left: 40px;
    cursor: pointer;
}
.control {
    margin-top: 15px;
    margin-right: 40px;
}

.menu{
    min-height: 100px;
}

<header id="header">               
                <div id="mySidenav" class="sidenav">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    <a href="index.html" class="sidenavtext">Home</a>
                    <a href="about.html" class="sidenavtext">About Us</a>
                    <a href="whatwedo.html" class="sidenavtext">What We Do</a>
                    <a href="getinvolved.html" class="sidenavtext">Get Involved</a>
                    <a href="contactus.php" class="sidenavtext">Contact Us</a>
                </div>
                        
                <div class="control">
                    <div class="col-md-4">
                        <img src="assets/img/logohome.png" class="pull-left img-responsive logo" alt="SAF Logo">  
                    </div>                            
                    <div class="col-md-8">                                
                            <!-- Use any element to open the sidenav -->
                        <span onclick="openNav()" class="pull-right menu-icon">☰</span>  
                        <button type="button" class="pull-right btn btn-danger btn-round donate">DONATE NOW</button>
                    </div>
                </div>                
        </header>

possible duplicate // [already answered here](https://stackoverflow.com/questions/2928275/jquery-hide-div) — Foo Bar, Jun 06 '17 at 06:40
Possible duplicate of [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — Jap Mul, Jun 06 '17 at 06:41
Try this.. https://stackoverflow.com/questions/12661797/jquery-click-anywhere-in-the-page-except-on-1-div — Shansana Waruna, Jun 06 '17 at 06:48

score 1 · Answer 1 · answered Jun 06 '17 at 06:48

Try use something like

$(window).click(function(event) {
  if ($(event.target).closest('div#mySidenav').length === 0 && $(event.target).closest('.menu-icon').length === 0) {
    closeNav()
  }
})

This will check if you click on your "openNav" or anywhere in the menu

function openNav() {
  document.getElementById("mySidenav").style.width = "50%";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
(function($) {
  // Instantiate MixItUp:
  // $('Container').mixItUp();
  // Add smooth scrolling to all links in navbar + footer link
  $(".sidenav a").on('click', function(event) {
    event.preventDefault();
    var datanew = this.href;
    var str2 = '.html';
    if (datanew.indexOf(str2) != -1) {
      window.location.href = datanew;
    } else {
      var hash = this.hash;
      $('html, body').animate({
          scrollTop: $(hash).offset().top
        },
        900,
        function() {
          alert(window.location);
          window.location.hash = hash;
        });
    }
  });
})(jQuery);

$(window).click(function(event) {
  if ($(event.target).closest('div#mySidenav').length === 0 && $(event.target).closest('.menu-icon').length === 0) {
    closeNav()
  }
})

.sidenav {
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #ef4f50;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
  /*max-height: 551px;*/
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #ffffff;
  display: block;
  transition: 0.3s
}

.sidenav a:hover,
.offcanvas a:focus {
  color: #f1f1f1;
}

.closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px !important;
  margin-left: 50px;
}

.menu-icon {
  color: #114576;
  font-size: 30px;
  margin-top: 40px;
  margin-left: 40px;
  cursor: pointer;
}

.control {
  margin-top: 15px;
  margin-right: 40px;
}

.menu {
  min-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="index.html" class="sidenavtext">Home</a>
    <a href="about.html" class="sidenavtext">About Us</a>
    <a href="whatwedo.html" class="sidenavtext">What We Do</a>
    <a href="getinvolved.html" class="sidenavtext">Get Involved</a>
    <a href="contactus.php" class="sidenavtext">Contact Us</a>
  </div>

  <div class="control">
    <div class="col-md-4">
      <img src="assets/img/logohome.png" class="pull-left img-responsive logo" alt="SAF Logo">
    </div>
    <div class="col-md-8">
      <!-- Use any element to open the sidenav -->
      <span onclick="openNav()" class="pull-right menu-icon">☰</span>
      <button type="button" class="pull-right btn btn-danger btn-round donate">DONATE NOW</button>
    </div>
  </div>
</header>

@LakhanKhandelwal No problem, happy to help – Carsten Løvbo Andersen Jun 06 '17 at 06:59 — Carsten Løvbo Andersen, Jun 06 '17 at 06:59

hide menu even when click outside or anywhere on webpage

1 Answers1