英文:
Open button not hiding when side bar pops out
问题
当侧边栏打开时，它会将一切推向左边。我只想要在侧边栏被推到左边时摆脱打开按钮。当侧边栏弹出时，背景图像会与打开按钮一起向左推移。我希望在单击打开按钮时使其消失，并在边距恢复正常并关闭侧边栏时重新出现。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js"></script>
<link href="style.css" rel="stylesheet">
<title>IKC Website</title>
</head>
<body>
<div id="main">
<div class="backgroundImg">
<span class="openNav" id="openNav" onclick="openNav()">&#9776; open</span>
</div>
<div id ="sideNav" class="sideNav">
<a id='link' href="javascript:void(0)" class="closeButton" onclick="closeNav()">&times;</a>
<a id='link' href="about.html">About<a>
<a id='link' href="members.html">Members<a>
<a id='link' href="services.html">Services<a>
<a id='link' href="contactUs.html">Contact<a>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
.backgroundImg {
background-image: url(blueMoutains.jpg);
height: 100vh;
background-repeat: no-repeat;
width: 100%;
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
z-index: 1;
filter: brightness(60%);
}
.openNav {
font-size: 30px;
cursor: pointer;
position: relative;
top: 100px;
left: 100px;
margin: 10px;
z-index: 0;
color: black;
}
.sideNav {
position: fixed;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
width: 0px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
overflow-x: hidden;
transition: 0.5s;
}
.sideNav a {
color: #818181;
text-decoration: none;
font-size: 30px;
padding: 10px;
transition: 0.5s;
display: block;
}
.sideNav .closeButton {
color: #818181;
width: 100px;
margin-left: 45vh;
position: relative;
left: 0vh;
bottom: 25vh;
margin-bottom: 0;
}
.sideNav a:hover{
color: white;
}
@media screen and (max-height: 450px) {
.sideNav {
padding-top: 50px;
}
.sideNav a {
font-size: 18px;
}
}
#main {
transition: margin-left .5s;
}
Javascript
function openNav() {
document.getElementById("sideNav").style.width = "350px";
document.getElementById("main").style.marginLeft = "350px";
}
function closeNav() {
document.getElementById("sideNav").style.width = "0px";
document.getElementById("main").style.marginLeft = "0px";
}
英文:
My side bar, when opened, pushes everything to the left. I just simply want to get rid of the open button when it does get pushed to the left. When the side bar pops out, the background image gets pushed to the left with the open button. I want the open button to disappear I click it and reappear when the margins are back to normal and the side bar is closed.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js"></script>
<link href="style.css" rel="stylesheet">
<title>IKC Website</title>
</head>
<body>
<div id="main">
<div class="backgroundImg">
<span class="openNav" id="openNav" onclick="openNav()">&#9776; open</span>
</div>
<div id ="sideNav" class="sideNav">
<a id='link' href="javascript:void(0)" class="closeButton" onclick="closeNav()">&times;</a>
<a id='link' href="about.html">About<a>
<a id='link' href="members.html">Members<a>
<a id='link' href="services.html">Services<a>
<a id='link' href="contactUs.html">Contact<a>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
.backgroundImg {
background-image: url(blueMoutains.jpg);
height: 100vh;
background-repeat: no-repeat;
width: 100%;
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
z-index: 1;
filter: brightness(60%);
}
.openNav {
font-size: 30px;
cursor: pointer;
position: relative;
top: 100px;
left: 100px;
margin: 10px;
z-index: 0;
color: black;
}
.sideNav {
position: fixed;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
width: 0px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
overflow-x: hidden;
transition: 0.5s;
}
.sideNav a {
color: #818181;
text-decoration: none;
font-size: 30px;
padding: 10px;
transition: 0.5s;
display: block;
}
.sideNav .closeButton {
color: #818181;
width: 100px;
margin-left: 45vh;
position: relative;
left: 0vh;
bottom: 25vh;
margin-bottom: 0;
}
.sideNav a:hover{
color: white;
}
@media screen and (max-height: 450px) {
.sideNav {
padding-top: 50px;
}
.sideNav a {
font-size: 18px;
}
}
#main {
transition: margin-left .5s;
}
Javascript
function openNav() {
document.getElementById("sideNav").style.width = "350px";
document.getElementById("main").style.marginLeft = "350px";
}
function closeNav() {
document.getElementById("sideNav").style.width = "0px";
document.getElementById("main").style.marginLeft = "0px";
}
答案1
得分: 0
在openNav函数内，获取打开按钮并使用样式隐藏它：
document.querySelector("#openNav").style.display = "none";
在closeNav函数内再次显示它：
document.querySelector("#openNav").style.display = "initial";
英文:
Inside openNav function, get the open button and hide it using styles:
document.querySelector("#openNav").style.display = "none";
And show it again inside closeNav:
document.querySelector("#openNav").style.display = "initial";
A demo:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function openNav() {
document.getElementById("sideNav").style.width = "350px";
document.getElementById("main").style.marginLeft = "350px";
document.querySelector("#openNav").style.display = "none";
}
function closeNav() {
document.getElementById("sideNav").style.width = "0px";
document.getElementById("main").style.marginLeft = "0px";
document.querySelector("#openNav").style.display = "initial";
}
<!-- language: lang-css -->
body {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
.backgroundImg {
background-image: url(blueMoutains.jpg);
height: 100vh;
background-repeat: no-repeat;
width: 100%;
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
z-index: 1;
filter: brightness(60%);
}
.openNav {
font-size: 30px;
cursor: pointer;
position: relative;
top: 100px;
left: 100px;
margin: 10px;
z-index: 0;
color: black;
}
.sideNav {
position: fixed;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
width: 0px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
overflow-x: hidden;
transition: 0.5s;
}
.sideNav a {
color: #818181;
text-decoration: none;
font-size: 30px;
padding: 10px;
transition: 0.5s;
display: block;
}
.sideNav .closeButton {
color: #818181;
width: 100px;
margin-left: 45vh;
position: relative;
left: 0vh;
bottom: 25vh;
margin-bottom: 0;
}
.sideNav a:hover{
color: white;
}
@media screen and (max-height: 450px) {
.sideNav {
padding-top: 50px;
}
.sideNav a {
font-size: 18px;
}
}
#main {
transition: margin-left .5s;
}
<!-- language: lang-html -->
<div id="main">
<div class="backgroundImg">
<span class="openNav" id="openNav" onclick="openNav()">&#9776; open</span>
</div>
<div id ="sideNav" class="sideNav">
<a id='link' href="javascript:void(0)" class="closeButton" onclick="closeNav()">&times;</a>
<a id='link' href="about.html">About</a>
<a id='link' href="members.html">Members</a>
<a id='link' href="services.html">Services</a>
<a id='link' href="contactUs.html">Contact</a>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论