所以汉堡包菜单在移动视图时自动打开，然后一旦我关闭汉堡包菜单并从移动视图更改为正常视图，它就会响应不打开自动。只要我刷新页面，它就会回到自动打开状态。请帮忙提前谢谢:)
<head><link rel="stylesheet" href="css/style.css"></head>
<body>
<nav>
<ul class="nav-links nav-active">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="burger toggle">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</body>
css
@media screen and (max-width:768px){
body{
overflow-x: hidden;/*hides the nav)*/
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color:#5D4954;
display: none;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%); /*this pops the nav off to the side)*/
transition: transform 0.5s ease-in;
}
.nav-links li{
opacity: 1; /* opacity 0 hides nav links opacity1 reveals nav links*/
}
.burger{
display: block;
}
.nav-active{
transform: translateX(0%);
display: flex;
}
@keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
}
Javascript
const navSlide = () => {
const burger = document.querySelector('.burger'); //just selects one being the burger menu
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li'); // selects all nav-link li's
}
burger.addEventListener('click', () => {
//toggle Nav
nav.classList.toggle('nav-active');
//animate links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else{
link.style.animation = 'navLinkFade 0.5s ease forwards ${index / 7 + .5}s';
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
通过切换类'nav-active'来打开/关闭导航，对吗?如果你在移动视图中开始，导航打开，然后你通过切换那个类关闭它。你的"nav-active"类现在消失了，当你改变视窗时，它不会神奇地重新出现。这就是为什么当你回到"正常"模式时，你的菜单会被隐藏起来的原因。视图。
"正常的调整;顺便说一下，是移动端的，因为移动端的浏览量早在2016年就开始超过桌面浏览量。2021年3月，谷歌甚至取代了"移动优先"。用"mobile only"进行排名。
如果你想让你的菜单在每次页面加载时自动打开，而不管视窗是什么——一切都很好!
如果你想让你的菜单在桌面视图中始终打开，你必须添加
"transform: translateX(0%);
display: flex;
从你的'nav-active'-类到'nav-links'-样式(当然只适用于桌面视图)。