css导航栏折叠在移动端如何实现-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-23 21:45:02

原创

237人浏览过

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

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

1. 响应式布局基础

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

基本结构如下：

<nav class="navbar">
  <div class="nav-toggle" id="mobile-menu">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul class="nav-links">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

登录后复制

2. 使用CSS控制折叠行为

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

立即学习“前端免费学习笔记（深入）”；

关键样式设置：

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

示例CSS：

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

.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');
});

登录后复制

这样用户点击汉堡图标时，导航列表会在移动端弹出或收起。