Javascript 我试图创建一个折叠的侧边栏,但当我在导航栏下面创建另一个部分时,它就不可见了
我现在面临的主要问题是,当我试图点击汉堡包菜单时,边栏消失了。我找不到代码有什么问题。Javascript 我试图创建一个折叠的侧边栏,但当我在导航栏下面创建另一个部分时,它就不可见了,javascript,html,css,Javascript,Html,Css,我现在面临的主要问题是,当我试图点击汉堡包菜单时,边栏消失了。我找不到代码有什么问题。 **This Is My HTML code** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
**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">
<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>
/* creating a hamburger */
.lines {
width: 20px;
height: 3px;
background-color: white;
margin: 3px;
}
.toggleBtn {
position: relative;
left: 235px;
top: 30px;
cursor: pointer;
}
.sideBar {
position: absolute;
top: 0px;
left: -200px;
width: 200px;
height: 100%;
background: black;
transition: all 300ms linear;
}
/* 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;
}
function togglesideBar(ref) {
document.getElementById('sideBar').classList.toggle('active');
}
当我点击汉堡打开我用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;
}
该部分的代码出现在这里。这是我在创建导航栏和侧栏之后创建的唯一一个部分
<div class="sideBar" id="sideBar">
<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>
/* creating a hamburger */
.lines {
width: 20px;
height: 3px;
background-color: white;
margin: 3px;
}
.toggleBtn {
position: relative;
left: 235px;
top: 30px;
cursor: pointer;
}
.sideBar {
position: absolute;
top: 0px;
left: -200px;
width: 200px;
height: 100%;
background: black;
transition: all 300ms linear;
}
/* 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;
}
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,
});
}
添加到.sideBar
,如下所示:
.sideBar {
position: absolute;
top: 0px;
left: -200px;
width: 200px;
height: 100%;
background: black;
transition: all 300ms linear;
z-index: 9999;
}
我建议创建一个CodePen或JSFiddle,这样每个人都能更好地了解您的文件