使用汉堡菜单（响应式菜单）向下滚动时显示内容
我的响应式菜单有问题。当我打开汉堡菜单时，我可以向下滚动，我实际上可以看到页面的内容。我唯一能看到的内容就是那三个盒子，我不知道为什么！我将列出这些框的代码，也许您可以说出原因。如果有任何不清楚的地方，请告诉我，以便我可以满足您的要求。Ps 我正在上传一张 gif 动图，显示正在发生的事情。
https://i.stack.imgur.com/iU0dj.gif
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link => {
link.classList.toggle("fade");
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css" />
<title>QM-SÜD GmbH Qualitätsmanagement</title>
</head>
<body>
<header>
<!--
<div class="logo-container">
<img src="./img/logo.svg" alt="logo">
<h4 class="logo"> QM SÜD</h4>
</div>
-->
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav=link" href="index.html">Home</a></li>
<li><a class="nav=link" href="services.html">Services</a></li>
<li><a class="nav=link" href="#">About Us</a></li>
<li><a class="nav=link" href="#">Credentials</a></li>
</ul>
</nav>
</header>
皈依舞1回答
-
慕尼黑5688855
查看提供的（部分）代码，我相信添加以下样式将解决问题：.hamburger { z-index: 2}.services { z-index: 0}
随时随地看视频慕课网APP
相关分类
Html5
