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

技术教程
2025-10-23 21:45:02

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

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

1. 响应式布局基础

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

基本结构如下：

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

2. 使用CSS控制折叠行为

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

关键样式设置：

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

示例CSS：

Spirit Me

SpiritMe允许用户使用数字化身制作视频，这些化身可以模拟用户的声音和情感

178 查看详情 Spirit Me

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

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

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

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

3. 添加J*aScript交互

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

脚本示例：

const menu = document.getElementById('mobile-menu');
const n*Links = document.querySelector('.n*-links');

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

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