小贝子编程

单击侧边菜单导航 div 以外的其他内容时如何关闭此侧边菜单导航



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

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: '02B';
    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>

这将帮助你

  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: '02B';
    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>

在

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

仅代码片段：

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

希望这有帮助。我已经尝试过它的工作。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium