实现左侧垂直布局的响应式网站导航菜单

本文详细讲解如何借助CSS Flexbox，正确构建一个左侧垂直排列的固定导航菜单，有效规避因缺少容器布局声明而导致的水平堆叠问题，并提供可直接套用的样式与结构代码，助你快速实现响应式侧边导航。

先理清一个关键点：默认状态下，像

这种块级元素内的子项
• 确实会逐一垂直排列。这看似“符合预期”，但如果目标是实现左侧垂直菜单（例如配图中展示的侧边栏样式），那就远不止垂直堆叠这么简单——你还需要控制布局方向、合理分配空间，并确保每个菜单项内的图标与文字能够精确对齐。

  在原代码中，.mobile-na v虽然设置了position: fixed并占满全宽，但内部列表并未启用Flex布局。结果.na v-item依然按照文档流垂直排列——这看起来“好像没错”，但实际上与期望的图标+文字垂直居中、等宽分栏的侧边菜单效果相差甚远。

  修复的核心其实只有两件事：一是为导航容器启用Flex布局，二是合理分配内部空间。直接来看修正后的CSS：

  .mobile-na v {  position: fixed;  bottom: 0;  left: 0;  width: 100%;  height: 100vh; /* 替换原错误语法：(var(--vh, 1vh) * 100) → 应为 calc(100vh) 或直接 100vh */  background-color: var(--primary-container);  color: var(--on-background-variant);  padding-block: 12px 16px;  z-index: 4;  box-shadow: var(--shadow-1);}/* 启用水平主轴布局，使菜单项横向排列（适用于底部横栏）*//* 但若需「左侧垂直菜单」，应改为： */.mobile-na v .na vbar-list {  display: flex;  flex-direction: column; /* 垂直排列菜单项 */  height: 100%;           /* 占满父容器高度 */  justify-content: center; /* 垂直居中（可选） */  gap: 8px;               /* 项目间间距 */}.mobile-na v .na vbar-list .na v-item {  width: 100%;            /* 确保每项宽度撑满 */}.mobile-na v .na vbar-list .na v-item .na v-link {  display: flex;  flex-direction: row;    /* 图标在左，文字在右 */  align-items: center;  gap: 12px;  padding: 10px 16px;  border-radius: 8px;  text-decoration: none;  color: inherit;  transition: background-color 0.2s;}.mobile-na v .na vbar-list .na v-item .na v-link:hover,.mobile-na v .na vbar-list .na v-item .na v-link[aria-current="true"] {  background-color: rgba(255, 255, 255, 0.1);}

  需要注意以下几点：

  • 原代码中的height: (var(--vh, 1vh) * 100)属于无效语法——CSS里直接用*做运算是不被支持的。如果确实需要使用变量，应写成height: calc(var(--vh, 1vh) * 100)，同时确保--vh已被正确定义。
  • 若目标是实现左侧垂直菜单，那么.mobile-na v的定位就不能再是bottom: 0; left: 0;，而应改为top: 0; left: 0;，宽度也需要相应收窄——例如窄栏设为80px，带文字的菜单设为240px，同时去掉width: 100%。
  • Material Symbols图标需要提前引入Google Fonts CDN或本地字体文件，否则图标将无法正常显示。
  • 建议为.na v-link添加text-decoration: none和color: inherit，这样默认链接样式就不会干扰整体设计效果。

  最后来看最终效果：菜单纵向贴靠页面左侧，每个导航项中的图标与文字水平对齐、等距分布，悬停时有明显的视觉反馈，当前页也有高亮标识。这套方案既保留了语义化的HTML结构，又充分利用了现代CSS的布局能力，无论是桌面端的侧边导航，还是移动端的抽屉菜单，都可以作为基础框架直接使用。