如何用css实现响应式导航栏折叠

响应式导航栏折叠的核心是通过css媒体查询判断屏幕尺寸，结合布局属性调整导航元素的显示状态，在桌面端展示完整导航，在移动端将导航项折叠到菜单按钮中，点击按钮再展开导航内容。

基础HTML结构搭建

首先需要搭建导航栏的基础结构，包含品牌标识、导航项列表和折叠触发按钮，代码如下：

<nav class="navbar">
  <div class="navbar-brand">品牌名称</div>
  <button class="navbar-toggle" aria-label="切换导航">
    <span></span>
    <span></span>
    <span></span>
  </button>
  <ul class="navbar-nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

核心CSS样式配置

基础导航栏样式

使用flexbox布局实现导航栏的水平排列，同时设置基础样式：

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
  color: #fff;
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
}

.navbar-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-nav li {
  margin-left: 2rem;
}

.navbar-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}

/* 折叠按钮默认隐藏，仅移动端显示 */
.navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.navbar-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #fff;
  border-radius: 3px;
}

媒体查询实现折叠逻辑

通过@media规则设置移动端断点，当屏幕宽度小于768px时触发折叠效果：

@media screen and (max-width: 768px) {
  /* 显示折叠按钮 */
  .navbar-toggle {
    display: flex;
  }

  /* 导航项默认隐藏，垂直排列 */
  .navbar-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: #333;
    padding: 1rem 0;
  }

  .navbar-nav li {
    margin: 0;
    text-align: center;
    padding: 1rem 0;
  }

  /* 展开状态显示导航项 */
  .navbar-nav.active {
    display: flex;
  }
}

交互效果补充

如果需要点击折叠按钮切换导航项的显示状态，可以配合少量JavaScript实现，代码如下：

document.querySelector('.navbar-toggle').addEventListener('click', function() {
  document.querySelector('.navbar-nav').classList.toggle('active');
});

如果希望纯css实现点击交互，也可以使用:checked伪类配合隐藏的复选框，不过实际开发中更推荐上述js方案，兼容性更好且逻辑更清晰。

常见问题说明

• 断点数值可以根据实际需求调整，常用的移动端断点有768px、992px等
• 导航栏的定位如果需要固定在顶部，可以添加position: fixed; top: 0; width: 100%;样式
• 折叠按钮的动画效果可以通过transition属性添加，提升交互体验

css响应式导航栏导航栏折叠flexbox修改时间：2026-06-17 20:30:43