如何让自定义导航菜单全屏显示且不破坏页面布局？

要实现导航菜单展开后占满全屏的效果，无需使用absolute定位导致布局混乱，可通过以下调整实现：

修改后的完整代码 #

HTML（无需改动）

<!--HTML-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="script/server.js"></script>
  <title>Hello</title>
</head>

<body>
  <header>
    <div class="topnav">
      <a href="#" class="active">Hello World!</a>
      <div id="nav-links">
        <a href="#">Home</a>
        <a href="#">Contact</a>
        <a href="#">About</a>
      </div>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </div>
  </header>
  <div class="body">
    <h1>Hello World!</h1>
  </div>
  <script src="script/script.js"></script>
</body>

</html>

CSS（核心修改）

/* CSS */

body {
  font-family: 'Roboto', Arial, sans-serif;
  background: white;
  margin: 0; /* 清除默认边距 */
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
  width: 100%;
}

.topnav #nav-links {
  display: none;
  /* 展开时占满全屏 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(51, 51, 51, 0.95); /* 半透明背景，避免内容穿透 */
  z-index: 99; /* 确保在页面内容上方 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100; /* 确保汉堡按钮不被导航菜单遮挡 */
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #b47b5a;
  color: white;
}

.body {
  display: flex;
  margin: auto;
  min-height: 300vh;
  padding-top: 56px; /* 给顶部导航预留空间，避免内容被遮挡 */
}

/* 导航展开时禁止页面滚动 */
body.nav-open {
  overflow: hidden;
}

JS（优化交互逻辑）

//JS
function myFunction() {
  var x = document.getElementById("nav-links");
  if (x.style.display === "flex" || x.style.display === "block") {
    x.style.display = "none";
    document.body.classList.remove("nav-open");
  } else {
    x.style.display = "flex";
    document.body.classList.add("nav-open");
  }
}

关键修改说明 #

• 全屏导航实现：给#nav-links使用fixed定位替代absolute，确保菜单始终覆盖整个视口；添加半透明背景避免页面内容穿透，用flex布局让导航链接居中显示。
• 层级控制：给汉堡按钮设置更高的z-index，保证展开导航时按钮不会被遮挡。
• 布局兼容性：清除body默认边距，给页面内容容器添加padding-top，避免初始内容被顶部导航栏遮挡。
• 体验优化：添加nav-open类，展开导航时禁止页面滚动，防止用户误操作。

内容的提问来源于stack exchange，提问作者careca_