移动端汉堡菜单问题：求纯HTML/CSS替代:has的展开方案

问题出在:has选择器的兼容性上，不少旧移动端浏览器对它的支持不好。我们可以用CSS的兄弟选择器（~）来替代，完全不需要JS，兼容性覆盖绝大多数移动设备。

修改思路 #

把checkbox移到和导航菜单同级的位置，这样就能通过checkbox:checked ~ .navigation来控制菜单的展开/收起，同时用后代选择器控制汉堡图标的切换，完全避开:has。

修改后的完整代码 #

HTML

<header>
  <div class="logo">
    <h1 class="logo-text">LOGO</h1>
    <button class="hamburger-icon">
      <label for="dropdown">
        <i class="fa-solid fa-bars">OPEN</i>
        <i class="fa-solid fa-x">CLOSE</i>
      </label>
    </button>
  </div>
  <!-- 把checkbox移到这里，和navigation同级 -->
  <input type="checkbox" id="dropdown" class="menu-checkbox" />
  <ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>
<main>
  <div class="container">
    <p>Test</p>
  </div>
</main>

CSS

* { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-decoration:none; 
  box-sizing:border-box; 
} 
body{ 
  background-color:#909090; 
} 
.hamburger-icon { 
  display: none; 
} 
header { 
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 10px 20px; 
  background-color: #000; 
} 
.logo-text{ 
  color:#FFF; 
} 
.hamburger-icon{ 
  border:none; 
  background-color:transparent; 
} 
.hamburger-icon .fa-bars, .hamburger-icon .fa-x{ 
  color:white; 
  font-size:1rem; 
  cursor:pointer; 
} 
/* 隐藏checkbox，保持原有交互 */
.menu-checkbox { 
  appearance: none; 
  position: absolute; 
  opacity: 0; 
  pointer-events: none;
} 
.navigation { 
  display: flex; 
  gap: 1rem; 
} 
.navigation a{ 
  color:white 
} 

@media screen and (max-width: 600px) { 
  header { 
    display: block; 
  } 
  .navigation { 
    height:0; 
    overflow:hidden; 
    flex-direction: column; 
    align-items: center; 
    transition:all 0.5s ease-in-out; 
  } 
  .logo { 
    display: flex; 
    justify-content: space-between; 
  } 
  .hamburger-icon { 
    display: block; 
  } 
  .fa-x{ 
    display:none; 
  } 

  /* 用兄弟选择器替代:has，控制菜单展开 */
  .menu-checkbox:checked ~ .navigation { 
    margin-top: 1rem; 
    height:100px; 
  } 

  /* 通过label的状态切换图标，利用checkbox的checked状态控制 */
  .menu-checkbox:checked ~ .logo .hamburger-icon .fa-bars { 
    display:none; 
  } 
  .menu-checkbox:checked ~ .logo .hamburger-icon .fa-x { 
    display:inline-block; 
  } 
} 

/* Content CSS */ 
.container{ 
  height:100vh; 
  display:grid; 
  place-items:center; 
  background-repeat: no-repeat; 
  background-attachment: fixed; 
  background-position: center; 
  background-size:cover; 
} 
.container p{ 
  text-align:center; 
  font-size:3rem; 
  color:#FFF; 
  text-shadow:2px 2px black; 
  transition:all 0.5s linear; 
}

关键修改点 #

1. 调整checkbox位置：把checkbox从button内部移到header里，和navigation、logo同级，这样能通过兄弟选择器~直接关联到导航菜单。
2. 替换:has选择器：用.menu-checkbox:checked ~ .navigation替代原来的header:has(...) .navigation，实现菜单展开/收起的控制。
3. 图标切换逻辑：通过.menu-checkbox:checked ~ .logo .hamburger-icon .fa-bars来控制图标的显示/隐藏，利用后代选择器穿透到图标元素。
4. 优化checkbox样式：给checkbox添加position: absolute; opacity: 0; pointer-events: none;，确保它完全隐藏但不影响label的交互。

这个方案完全基于HTML和CSS，没有任何JS，兼容性比:has好太多，能解决旧移动设备上菜单不显示的问题。

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