css导航菜单如何在小屏折叠显示_结合媒体查询隐藏次级菜单

小屏导航需用媒体查询隐藏次级菜单、添加汉堡按钮控制主菜单显隐、改hover为点击展开子菜单。核心是重构交互逻辑，同步调整样式与行为，确保可用性。

小屏下导航菜单折叠、次级菜单隐藏，核心是用媒体查询控制显示状态，并配合 JavaScript 或纯 CSS 实现点击展开。下面分三步讲清楚怎么做：

用媒体查询在小屏隐藏次级菜单

默认让次级菜单（如下拉子菜单）在桌面端可见，在小屏（比如宽度 ≤ 768px）时设为 display: none 或 visibility: hidden，同时确保父级菜单项保持可点击区域。

示例代码：

@media (max-width: 768px) {
  .nav-menu ul {
    display: none;
  }
  .nav-menu li:hover ul,
  .nav-menu li:focus-within ul {
    display: none; /* 移除悬停/聚焦触发，避免小屏误触 */
  }
}

添加汉堡按钮并控制主菜单折叠

小屏时隐藏原有导航栏，显示一个“☰”汉堡按钮；点击后切换主菜单的显示/隐藏状态。推荐用 checkbox hack 或 JS 控制，更稳妥用 JS。

• HTML 中加一个 input[type="checkbox"] 和配套的 label（作为按钮），再把 .nav-menu 包进 nav 标签里
• CSS 中用 input:checked ~ .nav-menu 显示菜单（需注意 DOM 结构层级）
• 或直接用 JS 绑定 click 事件，给 .nav-menu 切换 class="active"，CSS 控制 .nav-menu.active { display: block; }

小屏下重新设计次级菜单交互方式

不能只靠 hover，得支持点击展开。常见做法是：

• 给带子菜单的 li 添加 position: relative，并在其内部加一个“+”或箭头按钮
• 用 JS 监听该按钮点击，给对应 ul 切换 show 类，CSS 设置 .show { display: block; }
• 也可用 details/summary 标签（语义化好、无需 JS），但兼容性要注意（IE 不支持）

关键点：小屏不是简单“隐藏”，而是重构交互逻辑——从悬停变为点击，从自动展开变为主动触发。样式和行为要同步调整，才能真正可用。