使用HTML构建导航结构，包含品牌标识、导航链接和切换按钮；2. 通过CSS设置桌面端横向布局，隐藏切换按钮；3. 利用媒体查询在屏幕宽度小于768px时隐藏菜单并显示汉堡按钮；4. JavaScript为按钮添加点击事件，切换nav-menu的active类控制展开与收起；5. 结合flex布局与响应式设计实现平滑适配，确保交互简洁且可访问。
实现一个响应式导航菜单的折叠功能，核心是使用CSS媒体查询和灵活的布局结构，配合少量JavaScript提升交互体验。下面是一个简洁实用的实现方式。
导航菜单通常包含一个容器、品牌标识和多个导航链接，在小屏幕上需要一个切换按钮来展开或收起菜单。
<nav class="navbar">
<div class="nav-brand">Logo</div>
<ul class="nav-menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
<div class="nav-toggle" id="nav-toggle">☰</div>
</nav>
设置默认样式，让菜单在桌面端横向排列。
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 1rem;
}
.nav-brand {
color: white;
font-size: 1.5rem;
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu li a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}
.nav-toggle {
display: none;
font-size: 1.5rem;
color: white;
cursor: pointer;
}
当屏幕变小时，隐藏菜单并显示切换按钮，通过JavaScript控制显示状态。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.nav-menu {
display: none;
flex-direction: column;
width: 100%;
background-color: #444;
}
.nav-menu.active {
display: flex;
}
.nav-toggle {
display: block;
}
}
这里的关键是用 .active 类控制菜单的显示与隐藏。
为切换按钮添加点击事件，动态切换菜单的显示状态。
document.getElementById('nav-toggle').addEventListener('click', function() {
document.querySelector('.nav-menu').classList.toggle('active');
});
这样在移动端点击“汉堡”图标时，菜单就会展开或收起。
基本上就这些。利用CSS控制布局和显示，加上一行JavaScript实现交互，就能做出一个干净高效的响应式折叠导航。关键是结构清晰、样式分离、适配平滑。不复杂但容易忽略细节，比如菜单关闭状态的重置和可访问性考虑。基本上就这些。
以上就是css响应式导航菜单折叠实现的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
931
收藏
