移动端Hamburger菜单展开时页面内容可见问题求助

要实现汉堡菜单展开时页面内容完全不可见，你可以通过以下几处修改完成：

1. 调整HTML结构（优化选择器兼容性） #

把复选框移到<nav>标签外，方便用CSS兄弟选择器控制页面内容：

<input type="checkbox" id="click">
<nav>
  <div class="logo">Logo img</div>
  <label for="click" class="menu-btn">
      <i class="fas fa-bars"></i>
    </label>
  <ul>
    <li><a class="active" href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

2. 修改CSS核心样式 #

在移动端媒体查询（@media (max-width: 920px)）中添加以下规则：

/* 菜单展开时隐藏内容和页脚 */
#click:checked ~ .content,
#click:checked ~ #foo {
  display: none;
}

/* 禁止页面滚动，防止用户滚动露出内容 */
#click:checked ~ body {
  overflow: hidden;
}

同时调整菜单的top值，避免被导航栏遮挡（原导航栏高度为90px，菜单top设为90px）：

nav ul {
  position: fixed;
  top: 90px; /* 从80px改为90px */
  left: -100%;
  z-index: 9999;
  height: 100vh;
  width: 100%;
  text-align: center;
  display: block;
  transition: all 0.3s ease;
  background-color: #2f2f42;
}

修改后的完整代码 #

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: #2f2f42;
}

nav {
  display: flex;
  height: 90px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 100px;
  flex-wrap: wrap;
}

nav .logo {
  font-size: 20px;
  font-weight: bold;
  color: teal;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

nav ul li {
  margin: 0 5px;
}

nav ul li a {
  color: rgb(92, 156, 92);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

nav ul li a.active,
nav ul li a:hover {
  color: teal;
  background-color: white;
}

nav .menu-btn i {
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: none;
}

input[type="checkbox"] {
  display: none;
}

@media (max-width: 1000px) {
  nav {
    padding: 0 40px 0 50px;
  }
}

@media (max-width: 920px) {
  nav .menu-btn i {
    display: block;
  }
  #click:checked~nav .menu-btn i:before {
    content: "\f00d";
  }
  nav ul {
    position: fixed;
    top: 90px;
    left: -100%;
    z-index: 9999;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
    background-color: #2f2f42;
  }
  #click:checked~nav ul {
    left: 0;
  }
  nav ul li {
    width: 100%;
    margin: 40px 0;
  }
  nav ul li a {
    width: 100%;
    margin-left: -100%;
    display: block;
    font-size: 20px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:checked~nav ul li a {
    margin-left: 0px;
  }
  nav ul li a.active,
  nav ul li a:hover {
    background: none;
    color: teal;
  }
  
  /* 新增：菜单展开时隐藏内容和页脚 */
  #click:checked ~ .content,
  #click:checked ~ #foo {
    display: none;
  }
  
  /* 新增：禁止页面滚动 */
  #click:checked ~ body {
    overflow: hidden;
  }
}

.content {
  position: relative;
  background-color: #131314;
  color: whitesmoke;
  border: 5px solid grey;
  border-radius: 12px;
  width: auto;
  height: 50rem;
  margin-top: 1vw;
  margin-left: 4vw;
  margin-right: 4vw;
  font-weight: bolder;
}

@media (max-width: 920px) {
  .content {
    display: block;
  }
}

@media (max-width: 920px) {
  .content #bor,
  .det,
  .clk {
    display: block;
  }
}

.bor {
  justify-content: center;
  text-align: center;
  border-bottom: 0.7vw solid white;
}

.det {
  display: inline-block;
  margin-left: 1vw;
  text-align: left;
  border-bottom: 0.6vw solid whitesmoke;
}

.clk {
  float: right;
  width: fit-content;
  height: fit-content;
  margin-right: 1vw;
}

h2 {
  box-sizing: border-box;
  padding: 0.6vw;
  margin: 0.8vw 0.8vw 0.8vw 0.8vw;
  background-color: rgb(64, 80, 113);
  text-align: left
}

#exp {
  padding: 0.8vw;
  margin: 0.8vw 0.8vw 0.8vw 1.9vw;
  text-align: left;
}

footer {
  background-color: rgb(104, 99, 25);
  color: black;
  margin: 15px;
  padding: 15px;
  border-radius: 8px;
}

#foo {
  text-align: center;
}

HTML代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet" />
<input type="checkbox" id="click">
<nav>
  <div class="logo">Logo img</div>
  <label for="click" class="menu-btn">
      <i class="fas fa-bars"></i>
    </label>
  <ul>
    <li><a class="active" href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>
<div class="content">
  <p class="bor"> this is content heading <br>
  </p><br>
  <span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
  <span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
  <h2>this is demo</h2>
  <p id="exp">this is content end</p>
</div>
<div id="foo">
  <footer>
    <p>Copyright &copy; company 2022<br><br> All Rights Reserved</p>
  </footer>
</div>

修改完成后，点击汉堡菜单展开时，页面内容和页脚会被完全隐藏，同时页面无法滚动，确保菜单展开期间用户看不到任何页面内容。

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