当前位置：首页 > 文章列表 > 文章 > 前端 > CSS响应式导航栏折叠实现方法

CSS响应式导航栏折叠实现方法

2025-12-13 18:09:02 0浏览收藏

1. 基础HTML结构

构建一个包含导航栏和切换按钮的基本结构：

2. 默认样式：桌面端显示完整导航

在大屏幕上，导航项水平排列，隐藏切换按钮：

.navbar {
  background: #333;
  padding: 1rem;
}
.nav-menu {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.nav-menu li {
margin: 0 1rem;
}
.nav-menu a {
color: white;
text-decoration: none;
}
.nav-toggle {
display: none; / 桌面端隐藏 /
}

3. 媒体查询：移动端折叠导航

当屏幕宽度小于768px时，使用媒体查询隐藏默认菜单，显示汉堡按钮，并设置折叠菜单初始为隐藏状态：

@media (max-width: 768px) {
  .nav-toggle {
    display: block; /* 显示汉堡按钮 */
    cursor: pointer;
  }
.nav-toggle span {
width: 25px;
height: 3px;
background: white;
margin: 5px 0;
display: block;
transition: 0.3s;
}
.nav-menu {
display: none; / 默认隐藏菜单 /
flex-direction: column;
background: #444;
width: 100%;
text-align: center;
margin-top: 1rem;
}
.nav-menu.active {
display: flex; / 激活时显示 /
}
}

4. JavaScript控制菜单开关

添加简单脚本控制菜单的展开与收起：

const mobileMenu = document.getElementById('mobile-menu');
const navMenu = document.querySelector('.nav-menu');
mobileMenu.addEventListener('click', () => {
navMenu.classList.toggle('active');
});

点击汉堡按钮时，.nav-menu 切换 active 类，从而改变其 display 属性，在 none 与 flex 之间切换，实现显示与隐藏。

5. 可选：添加动画效果

为了让菜单出现更自然，可配合 max-height 实现滑动展开（因 display 不支持过渡动画）：

@media (max-width: 768px) {
  .nav-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
.nav-menu.active {
max-height: 300px; / 足够容纳所有菜单项 /
display: flex; / 仍需 display 控制布局 /
}
}

这样在切换时会有平滑展开效果，视觉体验更好。

基本上就这些。利用 media queries 判断屏幕尺寸，用 display 控制元素显隐，再加一点JavaScript交互，就能实现响应式导航栏的折叠功能。不复杂但容易忽略细节，比如初始隐藏、类名切换和移动端适配断点选择。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。