[英]Responsive Navigation Hamburger Menu not working
我试图让我的导航响应,但当我试图调整我的窗口大小时,我的汉堡包不允许下拉功能工作。 我把导航和响应式汉堡包都放在网上了,所以有什么地方可能会覆盖汉堡包吗?
这是我的 HTML
<header>
<div class="logo">
<p>LEGEND</p>
<div class= "hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<nav class="nav-bar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">STORE</a></li>
<li><a href="#">MY ACCOUNT</a></li>
<li><a href="#">SEARCH</a></li>
</ul>
</nav>
<button>
<a href="#">
<h4 style="color: #f5f5f5">PLAY DIVINE</h4>
</a>
</button>
</header>
这是我的CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #12171c;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10%;
background: rgba(0, 0, 0, 0.2);
position: fixed;
height: 10%;
}
.logo {
font-size: 30px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
cursor: pointer;
}
.nav-bar li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
a, button {
font-size: 16px;
font-weight: 500;
color: #b7b9bb;
text-decoration: none;
cursor: pointer;
}
button {
background: #967526;
border: 2px solid #ffce1f;
padding: 9px 25px;
}
.header-pic {
width: 100%;
height: 100%;
background-size: cover;
}
.hamburger {
display: none;
}
这是我的 css 响应式
@media only screen and (max-width: 1320px) {
.hamburger {
display: block;
cursor: pointer;
}
.hamburger .line {
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar {
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
background: #11101b;
transition: 0.2s;
overflow: hidden;
}
.nav-bar.active {
height: 450px;
}
.nav-bar ul {
display: block;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
.nav-bar ul li a {
margin-botton: 12px;
}
}
这是我的javascript
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onClick = function() {
navBar = document.querySelector(".nav-bar");
navbar.classList.toggle("active");
}
</script>
您的代码没有任何问题,只是您的 JavaScript 中有几个拼写错误:
onClick
而不是onclick
navbar
而不是navBar
at navbar.classList.toggle("active")
修正版
<script>
hamburger = document.querySelector(".hamburger");
hamburger.onclick = function() {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
}
</script>
额外(更改display: block;
display: grid;
在 CSS 媒体查询中的.nav-bar ul
选择器中以在垂直列表中显示下拉列表)
.nav-bar ul {
display: grid;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
hamburger = document.querySelector(".hamburger"); hamburger.onclick = function() { navBar = document.querySelector(".nav-bar"); navBar.classList.toggle("active"); }
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #12171c; } header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 10%; background: rgba(0, 0, 0, 0.2); position: fixed; height: 10%; }.logo { font-size: 30px; font-weight: bold; color: white; letter-spacing: 1.5px; cursor: pointer; }.nav-bar li { display: inline-block; list-style: none; padding: 0px 15px; } a, button { font-size: 16px; font-weight: 500; color: #b7b9bb; text-decoration: none; cursor: pointer; } button { background: #967526; border: 2px solid #ffce1f; padding: 9px 25px; }.header-pic { width: 100%; height: 100%; background-size: cover; }.hamburger { display: none; } @media only screen and (max-width: 1320px) {.hamburger { display: block; cursor: pointer; }.hamburger.line { width: 30px; height: 3px; background: #fefefe; margin: 6px 0; }.nav-bar { height: 0; position: absolute; top: 80px; left: 0; right: 0; width: 100vw; background: #11101b; transition: 0.2s; overflow: hidden; }.nav-bar.active { height: 450px; }.nav-bar ul { display: grid; width: fit-content; margin: 80px auto 0 auto; text-align: center; transition: 0.5s; opacity: 0; }.nav-bar.active ul { opacity: 1; }.nav-bar ul li a { margin-bottom: 12px; } }
<header> <div class="logo"> <p>LEGEND</p> <div class="hamburger"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <nav class="nav-bar"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">STORE</a></li> <li><a href="#">MY ACCOUNT</a></li> <li><a href="#">SEARCH</a></li> </ul> </nav> <button> <a href="#"> <h4 style="color: #f5f5f5">PLAY DIVINE</h4> </a> </button> </header>
来自 MDN Web Docs 的引述,如下链接所示:
在网页中添加事件处理程序的推荐机制是
addEventListener()
方法
您可以使用addEventListener()
来获得相同的结果:
<script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
navBar.classList.toggle("active");
});
</script>
hamburger = document.querySelector(".hamburger"); hamburger.addEventListener("click", () => { navBar = document.querySelector(".nav-bar"); navBar.classList.toggle("active"); });
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #12171c; } header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 10%; background: rgba(0, 0, 0, 0.2); position: fixed; height: 10%; }.logo { font-size: 30px; font-weight: bold; color: white; letter-spacing: 1.5px; cursor: pointer; }.nav-bar li { display: inline-block; list-style: none; padding: 0px 15px; } a, button { font-size: 16px; font-weight: 500; color: #b7b9bb; text-decoration: none; cursor: pointer; } button { background: #967526; border: 2px solid #ffce1f; padding: 9px 25px; }.header-pic { width: 100%; height: 100%; background-size: cover; }.hamburger { display: none; } @media only screen and (max-width: 1320px) {.hamburger { display: block; cursor: pointer; }.hamburger.line { width: 30px; height: 3px; background: #fefefe; margin: 6px 0; }.nav-bar { height: 0; position: absolute; top: 80px; left: 0; right: 0; width: 100vw; background: #11101b; transition: 0.2s; overflow: hidden; }.nav-bar.active { height: 450px; }.nav-bar ul { display: grid; width: fit-content; margin: 80px auto 0 auto; text-align: center; transition: 0.5s; opacity: 0; }.nav-bar.active ul { opacity: 1; }.nav-bar ul li a { margin-bottom: 12px; } }
<header> <div class="logo"> <p>LEGEND</p> <div class="hamburger"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <nav class="nav-bar"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">STORE</a></li> <li><a href="#">MY ACCOUNT</a></li> <li><a href="#">SEARCH</a></li> </ul> </nav> <button> <a href="#"> <h4 style="color: #f5f5f5">PLAY DIVINE</h4> </a> </button> </header>
对于更熟悉add()
/ remove()
的读者,这里有一些替代方法:
<script>
hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", () => {
navBar = document.querySelector(".nav-bar");
if (navBar.classList.contains("active")) {
navBar.classList.remove("active");
} else {
navBar.classList.add("active");
}
});
</script>
hamburger = document.querySelector(".hamburger"); hamburger.addEventListener("click", () => { navBar = document.querySelector(".nav-bar"); if (navBar.classList.contains("active")) { navBar.classList.remove("active"); } else { navBar.classList.add("active"); } });
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #12171c; } header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 10%; background: rgba(0, 0, 0, 0.2); position: fixed; height: 10%; }.logo { font-size: 30px; font-weight: bold; color: white; letter-spacing: 1.5px; cursor: pointer; }.nav-bar li { display: inline-block; list-style: none; padding: 0px 15px; } a, button { font-size: 16px; font-weight: 500; color: #b7b9bb; text-decoration: none; cursor: pointer; } button { background: #967526; border: 2px solid #ffce1f; padding: 9px 25px; }.header-pic { width: 100%; height: 100%; background-size: cover; }.hamburger { display: none; } @media only screen and (max-width: 1320px) {.hamburger { display: block; cursor: pointer; }.hamburger.line { width: 30px; height: 3px; background: #fefefe; margin: 6px 0; }.nav-bar { height: 0; position: absolute; top: 80px; left: 0; right: 0; width: 100vw; background: #11101b; transition: 0.2s; overflow: hidden; }.nav-bar.active { height: 450px; }.nav-bar ul { display: grid; width: fit-content; margin: 80px auto 0 auto; text-align: center; transition: 0.5s; opacity: 0; }.nav-bar.active ul { opacity: 1; }.nav-bar ul li a { margin-bottom: 12px; } }
<header> <div class="logo"> <p>LEGEND</p> <div class="hamburger"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <nav class="nav-bar"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">STORE</a></li> <li><a href="#">MY ACCOUNT</a></li> <li><a href="#">SEARCH</a></li> </ul> </nav> <button> <a href="#"> <h4 style="color: #f5f5f5">PLAY DIVINE</h4> </a> </button> </header>
更新
我修改了解决方案,以便 2 个块用于:
active
不在active
是当过渡作为active
切换发生时,这种分离可以防止样式被破坏。
可以将更多样式添加到第一个块以定义此列表的外观,例如使其在列中显示列表。
例子:
.nav-bar ul {
display: flex;
flex-direction: column;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul {
opacity: 1;
}
原来的
这是因为你的 JS 代码有一些语法错误。 这是该怎么做:
const
声明hamburger
和navbar
。hamburger
上调用addEventListener
添加切换navbar
类的功能按照以下示例修改您的代码,或访问此处修复的现场演示: codepen
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".nav-bar");
hamburger.addEventListener("click", () => navbar.classList.toggle("active"));
希望这个解决方案会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.