如何使用checkbox控制NavBar的Font Awesome图标实现移动端菜单开关

修复后实现效果 #

• 移动端点击汉堡图标可展开/收起菜单
• 菜单展开时汉堡图标自动切换为关闭叉号，收起时切回汉堡图标
• 完全通过原生CSS+checkbox实现，无需额外JS

修正后的HTML代码 #

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<div class="header">
  <div>
    <div class="logo">
      <h4>The Blue Lion 
        <!-- 把图标放到label里绑定checkbox，点击图标直接触发状态切换 -->
        <label for="nav-toggle" class="nav-toggle-label">
          <i class="fas fa-bars"></i>
        </label>
      </h4>
      <!-- 保留唯一ID的隐藏checkbox作为状态控制器 -->
      <input type="checkbox" id="nav-toggle" class="nav-toggle">
    </div>
  </div>
</div>

<div class="navbar">
  <div class="nav-links" id="myTopnav">
    <ul>
      <li><a href="#">Food</a></li>
      <li><a href="#">Drink</a></li>
      <li><a href="#">Covid-19</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Join the Team</a></li>
    </ul>
  </div>
</div>

<div class="contents1">
  <img src="https://mcdn.wallpapersafari.com/medium/84/3/pQuUz4.jpg" class="bluepic" alt="Blue">
</div>

<div class="footer">
  <div class="info">
    Leave us a review:
    <i class="fab fa-tripadvisor"></i>
  </div>

  <div class="socialiconsf">
    <i class="fab fa-facebook-f"></i>
    <i class="fab fa-twitter"></i>
    <i class="fab fa-instagram"></i>
  </div>
</div>

<div class="footer2">
  <p>
    © The Blue Lion 2021
  </p>
</div>

修正后的CSS代码（原有通用样式保持不变，仅更新导航/响应式部分） #

/* 全局通用样式、头部、桌面端导航、底部样式可完全保留原有代码 */
.nav-toggle {
  display: none;
}

/* 图标切换逻辑：checkbox选中时替换汉堡图标为关闭叉号 */
.nav-toggle:checked ~ .nav-toggle-label .fa-bars::before {
  content: "\f00d";
}

@media only screen and (max-width: 600px) {
  .nav-toggle-label {
    float: right;
    margin-top: 10px;
    margin-right: 40px;
    cursor: pointer;
  }
  .fa-bars {
    font-size: 20px;
  }
  .logo {
    text-align: left;
    font-size: 25px;
  }
  .nav-links {
    position: fixed;
    width: 100%;
    height: 100vh;
    text-align: center;
    background-color: #f7f7f7;
    border-bottom: 1px solid rgb(107, 76, 76);
    top: 80px;
    left: 0;
    flex-direction: column;
    display: none;
    margin: 0;
    padding: 0;
  }
  .nav-links ul {
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  /* 修正选择器逻辑，选中checkbox后显示菜单 */
  .nav-toggle:checked ~ .navbar .nav-links {
    display: flex;
  }
  .nav-links li {
    display: block;
    width: 100%;
    padding: 14px 0;
  }
  .contents1 {
    margin-top: 5vh;
  }
}

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