我构建了一个平滑过渡的汉堡菜单,使其具有视觉吸引力。一切工作正常,我可以使用 javascript 来完成此操作。但是,一旦浏览器到达汉堡菜单显示的某些断点, slider 导航就会突然显示然后关闭。
CSS 代码:
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #54976B;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
li {
opacity: 0;
}
}
.burger {
display: block;
}
} ```
### Then this is my active class so the transform occurs when the hamburger menu is being clicked
``` .nav-active {
transform: translateX(0);
}
这是我的 JavaScript 代码:
const burger = document.querySelector('.burger')
const nav = document.querySelector('.nav-links')
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active')
})
}
最佳答案
您的代码似乎有效,只是 burger
在移动设备上也看不到。尝试添加这个来跟踪它:
@media (max-width: 800px) {
.burger {
display: block;
width:20px;
height:20px;
border:1px solid red;
}
}
关于javascript - 当到达较小的断点时, slider 导航突然显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59743248/