How to close this side menu navigation when click other than side menu navigation div

Question

can anybody help me settle this thing ? cause i have problem on closing my side menu navigation bar. I only can close the navigation bar when i click on the x mark. but i want to close it when i click outside of the navigation bar. can anybody help me please.. ?

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("hehe").style.marginLeft = "250px";
 document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("hehe").style.marginLeft= "0";
 document.getElementById("main").style.marginLeft = "0";
    document.body.style.backgroundColor = "white";
}


var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

body {
    font-family: "Lato", sans-serif;
    transition: background-color .5s;
 background: url(pic/admin2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow:hidden;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

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

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

.sidenav .closebtn {
    position: absolute;
    top: -10px;
    right: 0px;
    font-size: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 10px;
 position: absolute;
    top: 4px;
    left: 4px;
 position:fixed absolute relative;
 border-radius: 0px 118px 118px 118px;
-moz-border-radius: 0px 118px 118px 118px;
-webkit-border-radius: 0px 118px 118px 118px;
border: 6px solid #818181;
color: #818181;
}

#main:hover
{
 border-radius: 0px 118px 118px 118px;
-moz-border-radius: 0px 118px 118px 118px;
-webkit-border-radius: 0px 118px 118px 118px;
border: 6px solid #7CFC00;
 color: #7CFC00;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.lalala {
 position: absolute; 
 bottom: 50px;
 cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s; 
}

a.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

a.accordion.active:after {
    content: "\2212";
 color: #7CFC00;
}


div.panel {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
 font-size: 15px;

}
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.huhu {
    position: relative;
    top: 0px;
    left: 70px;
    font-size: 50px;
 color:#818181;
}
.text {
    position: relative;
    top: 70px;
    left: 100px;
 color:#818181;
}
.head{
 text-decoration: none;
 color:#818181;
}
.head:hover{
 text-decoration: none;
 color:#7CFC00;
}
#hehe{
 transition: margin-left .5s;   
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="admin.php" class="focus">Home</a>
  <a href="#" class="accordion">Department</a>
<div class="panel">
  <a href="AdminDepartmentList.php">List of department</a>
  <a href="AdminDepartmentAdd.php">Add department</a>
</div>

<a href="#" class="accordion">User</a>
<div class="panel">
  <a href="AdminUserList.php">List of User</a>  
  <a href="AdminUserAdd.php">Add User</a>
</div>

<a href="#" class="accordion">System & Vendor</a>
<div class="panel">
  <a href="#">List of System</a>
  <a href="#">List of Vendor</a>
  <a href="#">Records</a>
</div>

  <a href="#" >User Log</a>
<div id="lalala" class="lalala">
  <a href="logoutAdmin.php" >Log Out</a>
</div>
</div>
<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
</div>
<div id="hehe">
<div class="huhu">
<a href="admin.php" class="head">
Vendor Records System
</a>
</div>
<div class="text">
Welcome Admin
</div>
</div>
</body>     
</html>

Possible duplicate of [How do I detect a click outside an element?](http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — Abhishek Pandey, Apr 04 '17 at 07:14

score 0 · Answer 1 · answered Apr 04 '17 at 07:22

0

use onmouseout attribute on your navigation div and call your closeNav method.

Snippet from your code only:

<div id="mySidenav" class="sidenav" onmouseout="closeNav()">

Hope this helps. I have tried its working.

answered Apr 04 '17 at 07:22

schaturv

122
8

score 0 · Accepted Answer · answered Apr 04 '17 at 09:53

This will help you

  var overlay = document.querySelector(".overlay");

  function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("mySidenav").style.zIndex = 3;
    document.getElementById("hehe").style.marginLeft = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    //document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
    overlay.classList.add("open");

}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("mySidenav").style.zIndex = 1;
    document.getElementById("hehe").style.marginLeft= "0";
    document.getElementById("main").style.marginLeft = "0";
    overlay.classList.remove("open");
    //document.body.style.backgroundColor = "white";
}


var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}

  body {
    font-family: "Lato", sans-serif;
    transition: background-color .5s;
  background: url(pic/admin2.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow:hidden;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

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

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

.sidenav .closebtn {
    position: absolute;
    top: -10px;
    right: 0px;
    font-size: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 10px;
  position: absolute;
    top: 4px;
    left: 4px;
  position:fixed absolute relative;
  border-radius: 0px 118px 118px 118px;
-moz-border-radius: 0px 118px 118px 118px;
-webkit-border-radius: 0px 118px 118px 118px;
border: 6px solid #818181;
color: #818181;
}

#main:hover
{
  border-radius: 0px 118px 118px 118px;
-moz-border-radius: 0px 118px 118px 118px;
-webkit-border-radius: 0px 118px 118px 118px;
border: 6px solid #7CFC00;
  color: #7CFC00;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.lalala {
  position: absolute;
  bottom: 50px;
  cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

a.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

a.accordion.active:after {
    content: "\2212";
  color: #7CFC00;
}


div.panel {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  font-size: 15px;

}
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.huhu {
    position: relative;
    top: 0px;
    left: 70px;
    font-size: 50px;
  color:#818181;
}
.text {
    position: relative;
    top: 70px;
    left: 100px;
  color:#818181;
}
.head{
  text-decoration: none;
  color:#818181;
}
.head:hover{
  text-decoration: none;
  color:#7CFC00;
}
#hehe{
  transition: margin-left .5s;
}

.overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay.open {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.2)
}

<!DOCTYPE html>
<html>
<head>
  <title>slidenav</title>
</head>
<body>
<div onclick="closeNav()"" class="overlay"></div>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="admin.php" class="focus">Home</a>
  <a href="#" class="accordion">Department</a>
    <div class="panel">
      <a href="AdminDepartmentList.php">List of department</a>
      <a href="AdminDepartmentAdd.php">Add department</a>
    </div>

    <a href="#" class="accordion">User</a>
    <div class="panel">
      <a href="AdminUserList.php">List of User</a>
      <a href="AdminUserAdd.php">Add User</a>
    </div>

    <a href="#" class="accordion">System & Vendor</a>
    <div class="panel">
      <a href="#">List of System</a>
      <a href="#">List of Vendor</a>
      <a href="#">Records</a>
    </div>

      <a href="#" >User Log</a>
    <div id="lalala" class="lalala">
      <a href="logoutAdmin.php" >Log Out</a>
    </div>
</div>

<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
</div>

<div id="hehe">
    <div class="huhu">
    <a href="admin.php" class="head">
    Vendor Records System
    </a>
    </div>
    <div class="text">
    Welcome Admin
    </div>
</div>

</body>
</html>

yes sure, i only add
after opening body and add style so it cover entire body. — patelarpan, Apr 05 '17 at 08:53

How to close this side menu navigation when click other than side menu navigation div

2 Answers2