3
誰でも私にこのことを解決させることができますか？私のサイドメニューのナビゲーションバーを閉じて問題があるため。私はxをクリックするとナビゲーションバーを閉じることができます。しかし、私はナビゲーションバーの外をクリックすると閉じてしまいます。誰でも助けてくれますか.. ..？あなたのナビゲーションdivの上のonmouseout属性このサイドメニューナビゲーションを閉じるにはサイドメニューナビゲーションdiv以外のをクリックすると
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("hehe").style.marginLeft = "250px";
\t 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";
\t 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;
\t 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;
\t position: absolute;
top: 4px;
left: 4px;
\t position:fixed absolute relative;
\t 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
{
\t border-radius: 0px 118px 118px 118px;
-moz-border-radius: 0px 118px 118px 118px;
-webkit-border-radius: 0px 118px 118px 118px;
border: 6px solid #7CFC00;
\t color: #7CFC00;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.lalala {
\t position: absolute;
\t bottom: 50px;
\t cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s; \t
}
a.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
a.accordion.active:after {
content: "\2212";
\t color: #7CFC00;
}
div.panel {
padding: 0 25px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
\t 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;
\t color:#818181;
}
.text {
position: relative;
top: 70px;
left: 100px;
\t color:#818181;
}
.head{
\t text-decoration: none;
\t color:#818181;
}
.head:hover{
\t text-decoration: none;
\t color:#7CFC00;
}
#hehe{
\t transition: margin-left .5s;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</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()">☰</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>
の可能性のある重複するのに役立ちます[どのように私は要素の外側をクリックを検出しますか？]（http://stackoverflow.com/questions/152975/how- do-i-detect-a-click-outside-an-element） –