css导航栏折叠在移动端如何实现

P粉602998670 2025-10-23 00:00:00 次阅读

在移动端实现CSS导航栏折叠，核心是通过响应式设计和简单的交互控制菜单的显示与隐藏。重点在于使用媒体查询适配小屏幕，并结合HTML与CSS（有时配合少量JavaScript）实现点击展开/收起的效果。

1. 响应式布局基础

使用媒体查询判断设备屏幕宽度，当屏幕较小时隐藏默认导航链接，显示一个“菜单按钮”（通常称为汉堡图标）。

基本结构如下：

2. 使用CSS控制折叠行为

默认在桌面端横向显示菜单；移动端通过CSS将 .nav-links 设为隐藏，点击按钮时再显示。

关键样式设置：

桌面端：导航项水平排列，display: flex
移动端：用媒体查询将菜单设为 display: none，垂直堆叠展示时使用 flex-direction: column
汉堡图标通过伪元素或三道横线模拟，点击后切换类名控制显隐

示例CSS：

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

.nav-links li a {
  padding: 1rem;
  text-decoration: none;
  color: #333;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}
.nav-toggle span {
  width: 25px;
  height: 3px;
  background: #333;
  margin: 3px 0;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background: #f4f4f4;
  }
  .nav-links.active {
    display: flex;
  }
  .nav-toggle {
    display: flex;
  }
}

3. 添加JavaScript交互

仅靠CSS无法完成点击切换，需用JavaScript为按钮绑定事件，动态添加或移除 active 类来控制菜单显示。

脚本示例：

const menu = document.getElementById('mobile-menu');
const navLinks = document.querySelector('.nav-links');

menu.addEventListener('click', () => {
  navLinks.classList.toggle('active');
});