javascript - 我试图创建一个折叠侧边栏,但是一旦我在导航栏下方创建另一个部分,它就会不可见
问题描述
我现在面临的主要问题是当我尝试点击汉堡菜单时侧边栏消失了。我找不到代码有什么问题。
**This Is My HTML code**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Sanan.com</title>
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&family=Zilla+Slab+Highlight&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<div class="leftNav">
这是侧边栏
<div class="sideBar" id="sideBar">
下面是切换按钮
<div class="toggleBtn" onclick="togglesideBar(this)">
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
</div>
<ul id="navList">
<li id="item-1"><a href=""> Home</a></li>
<li id="item-2"><a href="">About</a></li>
<li id="item-3"><a href="">Services</a></li>
<li id="item-4"><a href="">Blog</a></li>
<li id="item-5"><a href="">Contact</a></li>
</ul>
</div>
<div class="logo">
<img src="logo1.png" alt="">
</div>
</div>
<div class="rightNav">
<input type="text" name="searchBox" id="searchBox" placeholder="Enter your search">
<button id="search">Search</button>
</div>
</nav>
当我创建这个部分时,侧边栏消失了,我无法点击侧边栏中的任何按钮
<section class="firstSection">
<div class="mainBox">
<h1> <span id="typed"></span> </h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam est aut molestiae minima aliquid voluptates amet iste? Optio suscipit quod, dolor provident dolore unde impedit possimus, sit aut dolorem quos?</p>
<div class="buttons">
<button class="sec-Btn">Browse Blog</button>
<button class="sec-Btn">Browse Services</button>
<button class="sec-Btn">Contact</button>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.9/typed.min.js" async defer></script>
<script src="index.js"></script>
</body>
</html>
<-----CSS CODE---->
* {
margin: 0;
padding: 0;
font-family: 'Ubuntu', sans-serif;
}
我创建了一个汉堡菜单来折叠并打开一个侧边栏
/* creating a hamburger */
.lines {
width: 20px;
height: 3px;
background-color: white;
margin: 3px;
}
.toggleBtn {
position: relative;
left: 235px;
top: 30px;
cursor: pointer;
}
我设置到 SideBar 的所有属性
.sideBar {
position: absolute;
top: 0px;
left: -200px;
width: 200px;
height: 100%;
background: black;
transition: all 300ms linear;
}
当我单击汉堡包打开侧边栏时,活动的类用于侧边栏我已经用 javascript 切换了它
#sideBar.active {
left: 0px;
}
#navList li {
list-style: none;
padding: 10px 4px;
border-bottom: 1px solid grey;
}
#navList li a {
text-decoration: none;
color: white;
font-size: 17px;
}
#navList li a:hover {
color: orange;
transition: all 0.5s;
/* border: 1px solid orange;
padding: 2px 4px; */
}
.navbar {
display: flex;
align-items: center;
background: black;
/* border: 2px solid blue; */
}
.leftNav {
width: 60%;
/* border: 2px solid black; */
}
.rightNav {
width: 40%;
/* border: 2px solid black; */
}
.logo {
/* border: 2px solid blueviolet; */
width: 40%;
display: flex;
justify-content: center;
margin: 5px 60%;
}
.logo img {
width: 45%;
margin-top: 5px;
}
.rightNav {
text-align: right;
padding: 0px 20px;
}
#searchBox {
font-size: 20px;
border-radius: 8px;
border: 2px solid gray;
padding: 4px 2px;
}
#search {
font-size: 18px;
border: 2px solid gray;
border-radius: 8px;
padding: 5px 5px;
background: transparent;
color: white;
}
#search:hover {
box-shadow: 2px 2px 4px white;
}
该部分的代码在这里。这是我在创建导航栏和侧边栏后创建的唯一部分
/* Section-1 */
.firstSection {
/* background: url('last.jpg')center center no-repeat; */
/* background: white; */
height: 80vh;
display: flex;
}
.firstSection ::before {
content: "";
background: url('last.jpg')center center no-repeat;
background-size: cover;
opacity: 0.9;
position: relative;
}
.mainBox {
/* border: 2px solid black; */
max-width: 70%;
margin: auto;
}
.mainBox h1 {
font-size: 30px;
font-size: 34px;
text-align: center;
color: white;
}
.mainBox p {
font-size: 19px;
text-align: center;
color: white;
}
.buttons {
max-width: 49%;
/* border: 2px solid yred; */
/* border: 2px solid red; */
margin: auto;
margin-top: auto;
margin-top: 10px;
}
.sec-Btn {
padding: 10px 15px;
border: 2px solid white;
border-radius: 8px;
font-size: 16px;
color: white;
background-color: transparent;
font-weight: bold;
margin: 0px 3px;
}
.sec-Btn:hover {
box-shadow: 2px 2px 4px white;
transition: all 0.5s;
}
<---JAVASCRIPT CODE--->
这是切换侧栏类的代码
function togglesideBar(ref) {
document.getElementById('sideBar').classList.toggle('active');
}
此代码用于我的部分中的动画标题。我使用了一个 javascript Typed.js 库
window.onload = function() {
console.log("loaded")
var typed = new Typed('#typed', {
strings: ["Welcome to Sanan.com", "Learn Web Development", "Learn App development", "Learn Facebook Ads", "and other awesome programming concepts with me :)"],
backSpeed: 15,
smartBackspace: true,
backDelay: 1200,
startDelay: 1000,
typeSpeed: 25,
loop: true,
});
}
*The image link is given below that will show you the exact problem im facing.
https://prnt.sc/114sdj0
解决方案
将z-index添加到.sideBar
如下内容:
.sideBar {
position: absolute;
top: 0px;
left: -200px;
width: 200px;
height: 100%;
background: black;
transition: all 300ms linear;
z-index: 9999;
}
推荐阅读
- java - 为什么杰克逊反序列化 json 无法按顺序打印对象数组?
- r - (函数()中的错误:未使用的参数(高度= 8,宽度= 8)
- javascript - 通过 jquery change 方法传递参数
- product - OroCommerce 自定义可配置产品问题
- python - ValueError:没有为“conv2d_input”提供数据。需要每个键的数据:['conv2d_input']
- r - 数据框的多个变量之间的相关性按不同的变量分组
- javascript - Svelte App 可以读取 firebase 数据库,但不能添加
- qt - 尝试在 Qt creator 上编译时出错(警告被视为错误)
- python - 将 print 函数的输出写入文本文件
- java - Java“序言中不允许的内容。”