首页 > 文章 > 前端

响应式菜单：折叠与媒体查询实现方法

时间：2025-11-28 14:07:41 349浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《响应式多级菜单实现方法：折叠与媒体查询结合》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

响应式多级菜单通过HTML嵌套列表构建层级结构，CSS使用max-height和transition实现子菜单平滑展开与收起，JavaScript为.dropdown-toggle元素添加点击事件以切换.active类控制显示状态，结合媒体查询在移动端将主菜单设为垂直排列并增加缩进与背景色区分层级，同时通过伪元素添加上下箭头提示展开状态，提升可访问性，确保在不同设备上均具备良好用户体验。

如何在CSS中实现响应式多级菜单_折叠与显示结合媒体查询

在现代网页设计中，响应式多级菜单是提升用户体验的重要组件。尤其是在移动端屏幕空间有限的情况下，通过折叠与展开结合媒体查询的方式，可以让导航结构清晰又节省空间。

基本HTML结构

一个清晰的HTML结构是实现多级菜单的基础。使用无序列表（ul）嵌套来表示层级关系，便于样式控制和交互处理。

<nav class="menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#" class="dropdown-toggle">产品</a>
      <ul class="submenu">
        <li><a href="#">手机</a></li>
        <li>
          <a href="#" class="dropdown-toggle">配件</a>
          <ul class="submenu">
            <li><a href="#">耳机</a></li>
            <li><a href="#">充电器</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

CSS基础样式与折叠逻辑

默认隐藏子菜单，通过CSS类控制显示状态。利用 max-height 和 overflow: hidden 实现平滑过渡效果。

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
<p>.menu > ul {
display: flex;
}</p><p>.menu a {
display: block;
padding: 12px 16px;
text-decoration: none;
color: #333;
}</p><p>.submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}</p><p>.submenu.active {
max-height: 300px; /<em> 足够容纳子项的高度 </em>/
}</p>

注意：使用 max-height 而非 display: none/block，是为了支持动画过渡。

JavaScript控制展开/收起

为带 .dropdown-toggle 的链接添加点击事件，切换对应 submenu 的 active 类。

document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
  toggle.addEventListener('click', function(e) {
    e.preventDefault();
    const submenu = this.nextElementSibling;
    if (submenu && submenu.classList.contains('submenu')) {
      submenu.classList.toggle('active');
    }
  });
});

这段脚本阻止默认跳转行为，并切换子菜单的可见状态。

结合媒体查询适配移动端

在小屏幕上将主菜单改为垂直堆叠，并强化折叠行为。

@media (max-width: 768px) {
  .menu > ul {
    flex-direction: column;
  }
<p>.menu a {
border-bottom: 1px solid #eee;
}</p><p>.submenu {
background-color: #f9f9f9;
margin-left: 16px;
}
}</p>

当屏幕小于768px时，主菜单变为纵向排列，子菜单有缩进和背景色区分层级。这种结构在手机上更易操作。

增强可访问性与用户体验

加入视觉提示，比如三角图标表示可展开，提升用户认知。

.dropdown-toggle::after {
  content: " ▼";
  font-size: 0.7em;
  vertical-align: middle;
}
<p>.dropdown-toggle.collapse::after {
content: " ▲";
}</p>

JS中可在切换时同步修改类名，更新箭头方向：

this.classList.toggle('collapse');

基本上就这些。通过结构化HTML、灵活的CSS过渡、轻量JS控制以及精准的媒体查询，就能构建出既美观又实用的响应式多级菜单。关键是保持层级清晰，交互直观，适配不同设备自然流畅。

以上就是《响应式菜单：折叠与媒体查询实现方法》的详细内容，更多关于的资料请关注golang学习网公众号！