不活动时无法隐藏我的菜单
我正在尝试创建一个导航栏，该导航栏 100% 向右平移，直到用户单击汉堡并将其移回到正常位置。当我尝试禁用 x-overflow 时遇到问题。用户可以向右滚动并看到灰色背景，因此我的总视图宽度为 200%。将提供我的代码。
这是我的 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css" type="text/css">
<title>Home - Marco Chavez</title>
</head>
<body>
<nav>
<div class="logo">
<h4>Marco Chavez</h4>
</div>
<ul class="nav-links">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="pages/about.html">About</a>
</li>
<li>
<a href="./assets/ResumeMChavez2020-03.pdf" download>Resume</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section>
<main>
<h1>I build
<div id="powerful">
<span>Powerful</span>
</div>
web applications</h1>
<a href="pages/schedule.html">Schedule a meeting</a>
</main>
</section>
<script src="./js/script.js"></script>
</body>
</html>
JavaScript
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links li");
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active')
navLinks.forEach((link, index) => {
if(link.style.animation) {
link.style.animation = ""
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + .4}s`;
}
});
burger.classList.toggle('toggle');
});
}
navSlide();
呼如林1回答
-
呼唤远方
@media screen and (max-width: 768px) { .nav-links { position: fixed; }}
随时随地看视频慕课网APP
相关分类
Html5