如何在单击侧面菜单导航div之外单击此侧面菜单导航

时间：2017-04-04 07:08:49

标签： javascript php html css

任何人都可以帮我解决这个问题吗？因为我关闭我的侧面菜单导航栏有问题。我点击x标记时只能关闭导航栏。但我想在我点击导航栏外面时关闭它。请有人帮帮我..？

＆＃13;
＆＃13; 
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";
    } 
  }
}
＆＃13; 
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;   
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

在导航div上使用onmouseout属性并调用closeNav方法。

仅代码中的代码段：

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

希望这会有所帮助。我试过它的工作。

答案 1 :(得分：0)

这会对你有所帮助

＆＃13;
＆＃13; 
  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";
    }
  }
}
＆＃13; 
  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)
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题