HTML横向导航如何隐藏？条件隐藏控制技巧-html教程-PHP中文网

小屏下导航必须用 display: none 隐藏，而非 visibility/opacity/transform；需配合媒体查询、防溢出布局、动态路径高亮及 aria 属性保障可访问性。

html横向导航如何隐藏？条件隐藏控制技巧

导航项在小屏下必须用 `display: none` 隐藏，不能靠 `visibility: hidden` 或 `opacity: 0`

前者保留布局空间、仍可聚焦，后者影响键盘导航和屏幕阅读器；移动端首屏若漏出导航，会直接触发横向滚动或挤压内容区。实操中常见错误是用 transform: translateX(-100%) 移走导航——它没脱离文档流，父容器高度还在，且 iOS Safari 对 fixed + transform 组合有渲染延迟。

正确做法是配合媒体查询强制隐藏：

@media (max-width: 768px) {
  nav {
    display: none;
  }
}

断点用 max-width（非 min-width），符合移动优先逻辑
别只隐藏 <nav></nav>，检查子元素如 <ul></ul>、<div class="logo"> 是否也需同步控制 <li>如果用了 checkbox hack 实现汉堡菜单，确保 <code><input type="checkbox"> 本身不被隐藏（可用 position: absolute; clip: rect(0 0 0 0)）

用 `overflow-x: hidden` 拦截意外横向溢出，但不是导航隐藏的正解

当导航项宽度总和超过容器，又没设 flex-wrap: nowrap 或忘了限制子项伸缩，就会撑破容器、拉出横向滚动条。overflow-x: hidden 能压住滚动条，但只是掩盖问题——文字被裁切、点击区域丢失、无障碍属性失效。

真正要做的，是提前防溢出：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

给 <nav></nav> 加 overflow-x: hidden 仅作为兜底，不替代响应式逻辑
子项避免硬写 width: 120px，改用 flex: 0 1 auto 或 flex: 0 0 auto 控制基线
用 gap 替代 margin-right，防止最后一个子项多出无效间距
测试时手动缩小浏览器窗口，观察是否出现“文字重叠”或“图标错位”，那是 flex 分配异常的信号

条件隐藏不能只靠 CSS 类名硬编码，得动态匹配当前路径

写死 class="active" 在 HTML 里，会导致所有页面都高亮同一个菜单项；而纯 CSS 无法读取 URL，所以“当前页高亮”必须前端判断。但很多人误以为加个 :target 或 [href="/about"] 就能自动匹配——实际会因 trailing slash、query 参数、hash 路由失败。

最小可行方案（无框架）：

const currentPath = window.location.pathname.replace(/\/$/, '');
document.querySelectorAll('nav a').forEach(link => {
  const href = new URL(link.href).pathname.replace(/\/$/, '');
  if (href === currentPath) link.classList.add('active');
});