如何用HTML和CSS制作屏幕<800px时收缩的带图标响应式垂直菜单？

实现思路 #

1. 用CSS @media 媒体查询监听屏幕宽度，当宽度小于800px时触发菜单收缩逻辑
2. 借助CSS transition 属性实现菜单宽度变化的平滑过渡效果
3. 通过控制菜单项文字的显示/隐藏，配合菜单容器宽度调整，完成"图标+文字"到"仅图标"的切换

完整代码示例 #

HTML 结构

<div class="vertical-menu">
  <a href="#" class="menu-item">
    <span class="icon">📊</span>
    <span class="text">Position1</span>
  </a>
  <a href="#" class="menu-item">
    <span class="icon">📱</span>
    <span class="text">Position2</span>
  </a>
  <a href="#" class="menu-item">
    <span class="icon">⚙️</span>
    <span class="text">Position3</span>
  </a>
</div>

CSS 样式

/* 基础菜单样式 */
.vertical-menu {
  width: 200px;
  background-color: #f1f1f1;
  transition: width 0.3s ease-in-out; /* 宽度变化的过渡动画 */
  overflow: hidden; /* 隐藏超出容器的内容 */
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #ddd;
}

.icon {
  font-size: 18px;
  margin-right: 12px;
  min-width: 20px; /* 确保图标宽度固定，收缩时不偏移 */
}

.text {
  transition: opacity 0.2s ease-in-out; /* 文字淡入淡出效果 */
}

/* 屏幕宽度小于800px时的收缩样式 */
@media (max-width: 800px) {
  .vertical-menu {
    width: 60px; /* 收缩后仅容纳图标 */
  }

  .menu-item .text {
    opacity: 0;
    width: 0;
    margin: 0; /* 移除文字的间距 */
    overflow: hidden;
  }
}

关键代码说明 #

1. 过渡动画：.vertical-menu 上的 transition: width 0.3s ease-in-out 实现菜单宽度变化的平滑动画，.text 上的 opacity 过渡实现文字的淡入淡出效果
2. 媒体查询：@media (max-width: 800px) 是触发收缩的条件，可根据需求调整阈值
3. 图标固定宽度：给 .icon 设置 min-width，确保菜单收缩时图标位置保持稳定，不会因为文字消失而偏移
4. 文字隐藏逻辑：收缩时通过设置 opacity:0 和 width:0 隐藏文字，同时配合 overflow:hidden 避免文字占用空间

你可以将示例中的 emoji 图标替换为 Font Awesome 或其他图标库的类名（比如 <i class="fa-solid fa-chart-line"></i>），只要确保图标能正常显示即可。

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