竖Tab菜单如何隐藏？

使用纯 CSS 媒体查询（最常用、最推荐）

这是最标准、最优雅的方法，通过检测屏幕宽度,在特定尺寸下直接隐藏菜单。

核心思想： 当屏幕宽度小于某个“断点”（Breakpoint，768px）时，将菜单的 display 属性设置为 none。

示例代码：

假设你的 HTML 结构是这样的：

<div class="container">
  <nav class="sidebar">
    <ul class="tab-menu">
      <li class="tab-item active"><a href="#tab1">首页</a></li>
      <li class="tab-item"><a href="#tab2">产品</a></li>
      <li class="tab-item"><a href="#tab3">关于我们</a></li>
      <li class="tab-item"><a href="#tab4">联系</a></li>
    </ul>
  </nav>
  <main class="content">
    <h1>内容区域</h1>
    <p>这里显示 Tab 对应的具体内容...</p>
  </main>
</div>

你的 CSS 可能是这样：

/* 基础样式 */
.container {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 200px;
  background-color: #f4f4f4;
  padding: 20px;
}
.tab-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab-item a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  border-radius: 5px;
  margin-bottom: 5px;
}
.tab-item a:hover {
  background-color: #ddd;
}
.tab-item.active a {
  background-color: #007bff;
  color: white;
}
.content {
  flex: 1; /* 占据剩余所有空间 */
  padding: 20px;
}
/* ---------------- 关键部分 ---------------- */
/* 当屏幕宽度小于 768px 时 */
@media (max-width: 768px) {
  .sidebar {
    /* 方法1：直接隐藏 */
    display: none; 
    /* 或者，如果你想让它滑出/滑入，可以使用绝对定位和 transform */
    /* position: absolute;
    left: -200px; /* 将菜单移出可视区域 */
    /* transition: left 0.3s ease-in-out; */
  }
  /* 如果使用了绝对定位，你可能需要一个汉堡菜单按钮来触发显示 */
  /* .sidebar.show {
    left: 0;
  } */
}

优点：

• 简单直接： 只需要几行 CSS 代码。
• 性能好： 不依赖 JavaScript,浏览器原生支持。
• 无障碍性： 屏幕阅读器等辅助工具仍然可以“看到”菜单结构,只是视觉上隐藏了。

缺点：

• 无法手动控制： 用户无法在隐藏后手动显示菜单（除非配合 JavaScript，见方法二）。

结合 CSS 和 JavaScript（可手动控制）

如果你希望用户可以在菜单隐藏后，通过一个按钮（汉堡菜单”）来手动显示/隐藏菜单，就需要使用 JavaScript。

核心思想：

1. 在 HTML 中添加一个“汉堡菜单”按钮。
2. 用 JavaScript 监听这个按钮的点击事件。
3. 点击时，给 .sidebar 添加或移除一个类（.active 或 .show）。
4. 通过 CSS 定义这个类对应的样式,来控制菜单的显示和隐藏。

示例代码：

HTML:

<!-- 在 sidebar 前面添加汉堡菜单按钮 -->
<button class="menu-toggle" id="menuToggle">
  <span></span>
  <span></span>
  <span></span>
</button>
<div class="container">
  <nav class="sidebar" id="sidebar">
    <!-- ... Tab 菜单内容 ... -->
  </nav>
  <main class="content">
    <!-- ... 内容区域 ... -->
  </main>
</div>

CSS:

/* 基础样式保持不变... */
/* 汉堡菜单按钮样式 */
.menu-toggle {
  display: none; /* 默认在桌面端隐藏 */
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
  background: none;
  border: none;
  cursor: pointer;
}
/* 在移动端显示汉堡菜单 */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .sidebar {
    /* 使用绝对定位，使其可以覆盖在内容上 */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 250px;
    z-index: 999;
    transform: translateX(-100%); /* 默认向左滑出屏幕 */
    transition: transform 0.3s ease-in-out;
  }
  /* 当 sidebar 有 .active 类时，滑入屏幕 */
  .sidebar.active {
    transform: translateX(0);
  }
}

JavaScript:

// 等待 DOM 加载完成
document.addEventListener('DOMContentLoaded', () => {
  const menuToggle = document.getElementById('menuToggle');
  const sidebar = document.getElementById('sidebar');
  // 监听按钮点击事件
  menuToggle.addEventListener('click', () => {
    // 切换 .active 类
    sidebar.classList.toggle('active');
  });
  // 可选：点击内容区域时关闭菜单
  const content = document.querySelector('.content');
  content.addEventListener('click', () => {
    if (window.innerWidth <= 768) { // 仅在移动端生效
      sidebar.classList.remove('active');
    }
  });
});

优点：

• 用户体验好： 用户可以根据需要随时调出菜单。
• 灵活性高： 可以配合动画效果,让交互更流畅。

缺点：

• 需要 JavaScript： 如果用户禁用了 JS,功能将无法使用。
• 代码量稍多： 需要写 JS 逻辑。

使用 CSS 的 visibility 属性（特殊场景）

在某些情况下，你可能想隐藏菜单但又不希望它占用布局空间。visibility: hidden 可以实现这一点。

核心思想： visibility: hidden 会让元素变得不可见,但它原本占据的布局空间仍然保留。

示例代码：

.sidebar {
  /* ... 其他样式 ... */
}
@media (max-width: 768px) {
  .sidebar {
    visibility: hidden; /* 隐藏，但位置保留 */
  }
}

什么时候用？

• 非常罕见，通常用于制作复杂的动画效果，比如一个元素淡出后，另一个元素淡入,且它们不能重叠。
• 对于简单的隐藏菜单，display: none 通常是更好的选择,因为它能完全释放空间。

总结与建议

我的建议是：

• 对于绝大多数响应式网站，优先使用【方法一：纯 CSS 媒体查询】，它是最简洁、最标准的解决方案。
• 如果你的目标是创建一个类似原生 App 的移动端体验，或者希望用户能随时访问菜单，请使用【方法二：CSS + JavaScript】，这是目前移动端 Web 应用的主流做法。