本文详解如何通过 css flexbox 将水平导航栏重构为垂直侧边栏，使其固定于页面左侧，同时确保主内容区域正确流式排布在右侧，不被遮挡或错位。
本文详解如何通过 css flexbox 将水平导航栏重构为垂直侧边栏，使其固定于页面左侧，同时确保主内容区域正确流式排布在右侧，不被遮挡或错位。
要将导航栏从默认的顶部水平布局转变为左侧垂直侧边栏（即常见的“垂直导航菜单”），核心在于改变容器的布局方向与尺寸控制，而非简单浮动或绝对定位。原代码中 .navbar ul 使用 display: flex 但默认为 flex-direction: row（横向），导致菜单项并排显示；同时缺乏宽度约束和文档流隔离，致使后续内容被迫换行至下方。
✅ 正确实现方案：Flex Column + 显式宽度 + 布局容器化
首先，为 .navbar 设置固定宽度（如 200px），并强制其子元素 <ul> 沿垂直方向排列：
.navbar {
width: 200px; /* 固定侧边栏宽度 */
height: 100vh; /* 可选：撑满视口高度 */
position: fixed; /* 或 sticky，根据滚动需求选择 */
top: 0;
left: 0;
overflow-y: auto; /* 支持长菜单滚动 */
}
.navbar ul {
background: #006ac3;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column; /* ? 关键：改为纵向布局 */
justify-content: flex-start; /* 避免过度分散，改用 flex-start 更可控 */
height: 100%; /* 配合父容器高度 */
width: 100%;
}其次，优化列表项样式以适配垂直场景：
.navbar li {
margin: 0;
color: #fff;
background: #006ac3;
padding: 1rem;
text-align: left; /* 左对齐更符合侧边栏习惯 */
font-size: 16px; /* 可微调字体大小提升可读性 */
transition: background 0.3s ease;
position: relative;
width: 100%;
}
.navbar a {
display: block; /* 确保点击区域完整覆盖 */
color: #fff;
text-decoration: none;
padding: 0.5rem 1rem;
}
.navbar li:hover,
.navbar li:focus-within {
background: #ffc72c;
}
/* 下拉菜单适配（保持左对齐、层级清晰） */
.navbar ul li ul {
background: #005a99;
position: absolute;
top: 100%;
left: 100%; /* 向右展开，避免遮挡主菜单 */
min-width: 180px;
visibility: hidden;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.navbar ul li:hover > ul,
.navbar ul li:focus-within > ul {
visibility: visible;
opacity: 1;
transform: translateX(0);
}
.navbar ul li ul li {
width: 100%;
padding: 0.6rem 1rem;
background: #005a99;
}
.navbar ul li ul li:hover {
background: #ffc72c;
color: #000;
}? HTML 结构建议（增强语义与可维护性）
虽然原 HTML 功能可用，但存在语义瑕疵（如 <a> 直接包裹 <li> 不符合 HTML5 规范）。推荐修正为标准写法：
<nav role="navigation" class="navbar">
<ul>
<li><a href="{{ url_for('index') }}">Tools</a></li>
<li><a href="{{ url_for('certification') }}">Certification</a></li>
<li class="has-dropdown">
<a href="#">Application1</a>
<ul class="dropdown">
<li><a href="{{ url_for('accessing') }}">Access</a></li>
<li><a href="{{ url_for('loading_maintenance') }}">Maintenance</a></li>
<li><a href="{{ url_for('summary') }}">Summary</a></li>
<li><a href="{{ url_for('loading_report') }}">Report</a></li>
</ul>
</li>
<li class="disabled">Application2</li>
<li><a href="{{ url_for('application3') }}">Application3</a></li>
</ul>
</nav>? 关键提示：
- 使用 position: fixed 可让侧边栏始终可见，但需为 <main> 或内容区添加 margin-left: 200px 或 padding-left: 200px，避免内容被遮盖；
- 若需响应式支持（如移动端收起侧边栏），建议结合 @media 查询 + CSS 自定义属性（CSS Variables）或 JavaScript 控制类名切换；
- 所有下拉菜单应使用 aria-haspopup="true" 和 aria-expanded 属性提升无障碍访问体验。
通过以上调整，导航栏将稳定驻留在页面左侧，呈现清晰垂直结构，主内容自然流向右侧空白区域，完全符合预期布局效果。
