[英]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.