仅使用HTML和CSS实现无JavaScript的响应式导航栏问题咨询

当然可以完全不用JavaScript搞定！作为新手，咱们用CSS媒体查询配合一点点HTML结构调整就能实现适配你现有列表的响应式导航。我直接给你一套可运行的方案，再拆解细节：

完整代码实现 #

HTML（基于你的结构微调） #

<div id="nav">
  <!-- 新增：用于控制菜单显示的隐藏复选框 -->
  <input type="checkbox" id="menu-toggle">
  <!-- 新增：汉堡按钮（点击触发复选框） -->
  <label for="menu-toggle" class="hamburger">☰</label>
  
  <ul class="nav-list">
    <li><a class="active" href="index.html"><b>HOME</b></a></li>
    <li><a href="works.html">WORKS</a></li>
    <li><a href="about.html">ABOUT</a></li>
  </ul>
</div>

CSS #

/* 基础样式：大屏下的水平导航 */
#nav {
  background-color: #f8f9fa;
  padding: 1rem;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 让列表项水平排列 */
  gap: 2rem; /* 项之间的间距 */
}

.nav-list a {
  text-decoration: none;
  color: #333;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.nav-list a.active {
  background-color: #007bff;
  color: white;
}

/* 隐藏复选框，只用它的状态 */
#menu-toggle {
  display: none;
}

/* 汉堡按钮默认隐藏（大屏下不需要） */
.hamburger {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #333;
}

/* 媒体查询：小屏设备（比如宽度小于768px） */
@media (max-width: 768px) {
  /* 显示汉堡按钮 */
  .hamburger {
    display: block;
  }

  /* 小屏下列表垂直排列，默认隐藏 */
  .nav-list {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    display: none;
  }

  /* 当复选框被勾选时，显示导航列表 */
  #menu-toggle:checked ~ .nav-list {
    display: flex;
  }
}

关键细节解释 #

• 为什么用复选框？ 这是不用JS实现交互的核心：CSS的~兄弟选择器可以监听复选框的:checked状态，从而控制导航菜单的显示/隐藏，完全不需要JavaScript。
• 媒体查询的作用：@media (max-width: 768px)会在屏幕宽度小于等于768px时触发里面的样式，把水平导航改成垂直折叠的样式。
• 你的原有结构改动极小：只需要加一个隐藏的复选框和汉堡按钮的label，原有的列表和链接完全保留。

你可以直接把这段代码复制过去测试，调整颜色、间距这些样式到你喜欢的样子就行～

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