打开和关闭sidenav菜单和导航栏问题
问题描述:
我遇到了几个问题在这里。我正在尝试设置一个锁定的顶部栏,它可以工作。但是,即使我已经放置了一些项目,如橙色动画按钮,它会出现在文本链接之前的栏上。其次。我希望可以使用动画按钮作为一种手段来关闭页面右侧的弹出式菜单。对不起,如果这是真的很简单,我在这里失踪。我仍然在学习这些东西。打开和关闭sidenav菜单和导航栏问题
function myFunction(x) {
x.classList.toggle("change");
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.navbar {
overflow: hidden;
background-color: #577CC1;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-size: 17px;
}
body {
margin:0;
background-color: #ec7c23;
\t font-color: ;
\t font-size: 10pt;
\t font-family: arial;
height: 1000;
\t
}
p, td, th {
\t font-size: 10pt;
\t font-family: arial;
}
form {
margin: 0px;
padding: 0px;
}
.main {
padding: 10px;
margin-top: 30px;
}
/*animated button*/
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #ec7c23;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
/*END animated button*/
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div class="navbar">
<font size=20 color=white>
<b>Website</b>
</font>
<a href="#link">Link</a>
<a href="#Link2">Another Link</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<span style="font-size:30px;cursor:pointer" onclick="openNav()" >
<div class="container" onclick="myFunction(this)" >
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</span>
</div>
答
希望这有助于:
<div class="navbar" style="z-index: 1000">
<font size=20 color=white>
<b>Website</b></font>
<span style="font-size:30px;cursor:pointer;float:right;">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</span>
<a href="#link">Link</a>
<a href="#Link2">Another Link</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
var mySidenavWidth = document.getElementById("mySidenav").style.width;
if (mySidenavWidth === "250px")
closeNav();
else
openNav();
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0px";
}
</script>
感谢的人,这似乎解决它。我仍然不明白为什么即使我在代码中的链接之前放置了动画按钮的代码,它仍然首先放置链接。我感谢帮助:) –
我把'float:right'作为span元素,并将它移动到''标记的顶部。可能还有其他很好的解决方案(我不是CSS的专家),但是这种改变完成了这项工作;) –
很酷,一切都很好,欣赏它:) –