学会CSS竖向折叠导航栏效果，轻松实现网页美观与实用性的完美结合

May 11, 2026

—

在构建现代网页时，导航栏是一个不可或缺的元素，它不仅帮助用户快速定位所需内容，还能提升整体页面的美观性。CSS（层叠样式表）为创建各种样式的导航栏提供了丰富的可能性。本文将带你详细了解如何使用CSS实现一个竖向折叠的导航栏，让网页在美观与实用性上达到完美结合。
1. 竖向折叠导航栏的基本结构
首先，我们需要构建一个基本的HTML结构，它是CSS样式的基础。

在这个结构中，

标签代表导航区域，而

标签用于构建列表，每个
包含一个导航链接。
2. CSS样式设置
接下来，我们通过CSS来美化这个导航栏，并使其具有折叠功能。
.vertical-navbar {
background-color: #333;
overflow: hidden;
}

.vertical-navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.vertical-navbar li {
float: left;
}

.vertical-navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.vertical-navbar li a:hover {
background-color: #555;
}

/* 折叠效果 */
.vertical-navbar li a.active {
background-color: #04AA6D;
}

.vertical-navbar .hamburger {
display: none;
}

@media screen and (max-width: 600px) {
.vertical-navbar li {
float: none;
}

.vertical-navbar li a {
text-align: left;
}

.vertical-navbar .hamburger {
display: block;
float: right;
padding: 14px 16px;
}

.vertical-navbar li {
display: none;
}

.vertical-navbar li.active {
display: block;
}
}
在上面的CSS代码中，我们设置了基本的背景颜色、字体颜色和链接样式。我们还使用了媒体查询来在屏幕宽度小于600px时显示一个汉堡图标，并使导航链接可折叠。
3. 添加折叠功能
为了实现折叠效果，我们可以通过JavaScript来控制导航链接的显示与隐藏。

☰

function toggleMenu() {
var x = document.getElementsByClassName(“vertical-navbar”)[0];
if (x.className === “vertical-navbar”) {
x.className += ” responsive”;
} else {
x.className = “vertical-navbar”;
}
}
在上述JavaScript代码中，我们定义了一个
toggleMenu
函数，它会在点击汉堡图标时切换导航栏的类名，从而实现折叠效果。
4. 实际应用与优化
现在，我们已经创建了一个基本的竖向折叠导航栏。在实际应用中，你可以根据自己的需求进行进一步的优化，例如：
使用图标库（如Font Awesome）来美化导航图标。
添加更多的交互效果，如平滑的滚动动画。
为不同屏幕尺寸和设备优化布局和样式。
通过掌握竖向折叠导航栏的制作方法，你不仅能够提升网页的美观性，还能提高用户体验。希望本文能为你提供有益的启示，让你在网页设计中更加得心应手。