当前位置：首页 > 文章列表 > 文章 > 前端 > 响应式导航菜单折叠技巧

响应式导航菜单折叠技巧

2026-04-12 10:30:32 0浏览收藏

本文详细介绍了如何用HTML、CSS和少量JavaScript实现一个简洁高效且可访问的响应式折叠导航菜单：通过语义化HTML构建基础结构，利用Flex布局与媒体查询（断点768px）实现桌面端横向展示与移动端隐藏菜单+显示汉堡按钮的自动切换，并借助JavaScript动态控制`.active`类来展开/收起菜单，兼顾交互流畅性与响应式适配的平滑体验——无需复杂框架，结构清晰、样式分离、细节到位，是前端开发中实用性强、易上手又经得起推敲的经典实践方案。

css响应式导航菜单折叠实现

实现一个响应式导航菜单的折叠功能，核心是使用CSS媒体查询和灵活的布局结构，配合少量JavaScript提升交互体验。下面是一个简洁实用的实现方式。

1. HTML 结构

导航菜单通常包含一个容器、品牌标识和多个导航链接，在小屏幕上需要一个切换按钮来展开或收起菜单。

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

2. 基础 CSS 样式

设置默认样式，让菜单在桌面端横向排列。

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

.nav-brand {
  color: white;
  font-size: 1.5rem;
}

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

.nav-menu li a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
}

.nav-toggle {
  display: none;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
}

3. 响应式媒体查询与折叠逻辑

当屏幕变小时，隐藏菜单并显示切换按钮，通过JavaScript控制显示状态。

@media (max-width: 768px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #444;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }
}

这里的关键是用 .active 类控制菜单的显示与隐藏。

4. 添加 JavaScript 控制折叠

为切换按钮添加点击事件，动态切换菜单的显示状态。

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

这样在移动端点击“汉堡”图标时，菜单就会展开或收起。

基本上就这些。利用CSS控制布局和显示，加上一行JavaScript实现交互，就能做出一个干净高效的响应式折叠导航。关键是结构清晰、样式分离、适配平滑。不复杂但容易忽略细节，比如菜单关闭状态的重置和可访问性考虑。基本上就这些。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

Flex布局与媒体查询实战教程

上一篇: Flex布局与媒体查询实战教程

下一篇: Set集合与数学集合操作详解

查看更多