javascript - 汉堡菜单打不开
问题描述
您好,当我调整浏览器大小时,我的汉堡菜单没有打开。我尝试了许多不同的想法,但没有任何效果。在您调整打开菜单的窗口的大小之后,还有一个奇怪的第二秒
错误:未捕获的类型错误:无法读取 HTMLDivElement.burger.addEventListener 处未定义的属性“切换”
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navul');
burger.addEventListener('click', () => {
nav.classlist.toggle('nav-active');
});
}
navSlide();
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: red;
font-family: 'Poppins', sans-serif;
font-weight: 400;
}
.logo {
color: white;
letter-spacing: 6px;
text-transform: uppercase;
font-size: 20px;
}
.navul {
display: flex;
width: 45%;
color: white;
list-style: none;
justify-content: space-around;
}
.navul a {
text-decoration: none;
color: white;
letter-spacing: 2px;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
color: white;
margin: 5px;
background-color: white;
}
@media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.navul {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: red;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navul li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
<section id="01">
<nav class="navigation">
<div class="logo">
<h4>Spieker Manufaktur</h4>
</div>
<ul class="navul">
<li><a href="#">Home</a></li>
<li><a href="#">Über Uns</a></li>
<li><a href="#">Produkte</a></li>
<li><a href="#">Herstellung</a></li>
</ul>
<div class="burger">
<div class="line01"></div>
<div class="line02"></div>
<div class="line03"></div>
</div>
</nav>
</section>
解决方案
推荐阅读
- if-statement - 使用 IF 语句创建计算列需要对计算列中的多个列表选项使用相同的源列值
- c# - 通过扩展属性过滤 CalendarView 时没有结果
- node.js - 如何在快递应用程序中使用 routee.net 发送短信以验证电话号码
- python - 如何在 Python 中从 Bin 文件中获取 JPG(RGB 颜色)
- javascript - 自动播放播放列表中的下一首曲目
- html - 1px 边框问题不显示
- python - Python 创建全局文件
- mysql - 显示年份和月份但没有显示值的数据
- sql - 如何有效地缓存/索引聚合子查询
- android - 假设 ViewPager 中的相邻片段将始终保持其 UI 处于活动状态是否安全?