[英]Trouble with JS showing/opening hamburger menu
I've been having trouble figuring out what's missing in JS or HTML that's not causing the hamburger menu to show when clicked appropriately.我一直无法弄清楚 JS 或 HTML 中缺少的内容,这些内容在正确单击时不会导致汉堡菜单显示。 I usually get an error with a permissions message but I've been able to use JS fine so this project is the only one I've been having problems with.
我通常会收到一条权限消息错误,但我已经能够很好地使用 JS,所以这个项目是我唯一遇到问题的项目。
const hamburgerIcon = document.getElementsByClassName('hamburger-icon')[0] const navbarLinks = document.getElementsByClassName('navbar-links')[0] hamburgerIcon.addEventListener('click', () => { navbarLinks.classList.toggle('active') })
.brand-title { color: #000; margin-left: 2rem; }.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem; }.navbar-links ul { margin: 0; display: flex; padding: 0; }.navbar-links li { list-style: none; }.navbar-links li a { text-decoration: none; color: #000; display: block; padding: 1rem 1.5rem; }.hamburger-icon { display: none; color: #000; cursor: pointer; }
<nav class="navbar"> <div class="brand-title">LOGO</div> <a href="#" class="hamburger-icon"><i class="fa-solid fa-bars fa-2x"></i></a> <div class="navbar-links"> <ul class="navbar-items"> <li><a href='./pages/projects.html'>Projects</a></li> <li><a href=#>About</a></li> <li><a href=#>Contact</a></li> </ul> </div> </nav>
I cant see what U have done for showing menu.我看不到你为显示菜单做了什么。 in fact there is no active class selector in UR css code if U did not used libs and it is a pure implementation pay more attention for what U want.
事实上,如果 U 没有使用库,那么在 UR ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 代码中没有活动的 class 选择器,它是一个纯粹的实现,更加关注你想要的东西。
You should fix your CSS code. Apply this code...
const hamburgerIcon =
document.getElementsByClassName('hamburger-icon')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
hamburgerIcon.addEventListener('click', () => {
navbarLinks.classList.toggle('active');
});
.brand-title {
color: #000;
margin-left: 2rem;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem;
}
.navbar-links ul {
margin: 0;
display: flex;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
text-decoration: none;
color: #000;
display: block;
padding: 1rem 1.5rem;
}
/* added code here */
.hamburger-icon {
display: none;
color: #000;
cursor: pointer;
}
.navbar-links.active {
display: block;
}
@media (max-width:768px) {
.navbar-links {
display: none;
}
.hamburger-icon {
display: block;
}
}
<nav class="navbar">
<div class="brand-title">LOGO</div>
<a href="#" class="hamburger-icon"
>Hamburger</i
></a>
<div class="navbar-links">
<ul class="navbar-items">
<li><a href="./pages/projects.html">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.