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

本文详解如何通过 css flexbox 正确构建左侧垂直排列的固定导航菜单，解决因缺少容器布局声明导致的水平堆叠问题，并提供可直接复用的样式与结构代码。

本文详解如何通过 css flexbox 正确构建左侧垂直排列的固定导航菜单，解决因缺少容器布局声明导致的水平堆叠问题，并提供可直接复用的样式与结构代码。

默认情况下，<ul> 元素以块级方式渲染，其子项 <li> 会垂直堆叠；但若目标是左侧垂直菜单（如图中左侧样式），需明确控制布局方向与空间分配。原代码中 .mobile-nav 虽设为 position: fixed 并占据全宽，但未对内部列表启用 Flex 布局，导致 .nav-item 仍按文档流垂直排列——这看似“符合预期”，实则与用户期望的图标+文字垂直居中、等宽分栏式侧边菜单不符。

关键修复在于为导航容器启用 Flex 布局并合理分配空间：

.mobile-nav {  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-nav .navbar-list {  display: flex;  flex-direction: column; /* 垂直排列菜单项 */  height: 100%;           /* 占满父容器高度 */  justify-content: center; /* 垂直居中（可选） */  gap: 8px;               /* 项目间间距 */}.mobile-nav .navbar-list .nav-item {  width: 100%;            /* 确保每项宽度撑满 */}.mobile-nav .navbar-list .nav-item .nav-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-nav .navbar-list .nav-item .nav-link:hover,.mobile-nav .navbar-list .nav-item .nav-link[aria-current="true"] {  background-color: rgba(255, 255, 255, 0.1);}

⚠️ 注意事项：

• 原 CSS 中 height: (var(--vh, 1vh) * 100) 是无效语法，CSS 不支持算术运算符 * 直接使用；应改用 height: 100vh 或 height: calc(var(--vh, 1vh) * 100)（需确保 --vh 已正确定义）。
• 若目标为「左侧垂直菜单」，.mobile-nav 的 bottom: 0; left: 0; 需调整为 top: 0; left: 0; 并设置 width: 80px（窄栏）或 width: 240px（含文字），同时移除 width: 100%。
• Material Symbols 图标需引入 Google Fonts CDN 或本地字体文件，否则图标将不显示。
• 推荐为 .nav-link 添加 text-decoration: none 和 color: inherit，避免默认链接样式干扰设计。

最终效果：菜单纵向贴靠页面左侧，每个导航项包含图标与文字，水平对齐、等距分布，支持悬停反馈与当前页高亮。此方案兼顾语义化 HTML 结构与现代 CSS 布局能力，适用于桌面端侧边导航及移动端抽屉式菜单基础构建。