响应式多级菜单通过HTML嵌套列表构建层级结构，CSS使用max-height和transition实现子菜单平滑展开与收起，JavaScript为.dropdown-toggle元素添加点击事件以切换.active类控制显示状态，结合媒体查询在移动端将主菜单设为垂直排列并增加缩进与背景色区分层级，同时通过伪元素添加上下箭头提示展开状态，提升可访问性，确保在不同设备上均具备良好用户体验。
在现代网页设计中，响应式多级菜单是提升用户体验的重要组件。尤其是在移动端屏幕空间有限的情况下，通过折叠与展开结合媒体查询的方式，可以让导航结构清晰又节省空间。
基本HTML结构
一个清晰的HTML结构是实现多级菜单的基础。使用无序列表（ul）嵌套来表示层级关系，便于样式控制和交互处理。
CSS基础样式与折叠逻辑
默认隐藏子菜单，通过CSS类控制显示状态。利用 max-height 和 overflow: hidden 实现平滑过渡效果。
.menu ul { list-style: none; padding: 0; margin: 0;}.menu > ul {display: flex;}
.menu a {display: block;padding: 12px 16px;text-decoration: none;color: #333;}
.submenu {max-height: 0;overflow: hidden;transition: max-height 0.3s ease-out;}
.submenu.active {max-height: 300px; / 足够容纳子项的高度 /}
注意：使用 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'); } });});
这段脚本阻止默认跳转行为，并切换子菜单的可见状态。
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
218 查看详情 
结合媒体查询适配移动端
在小屏幕上将主菜单改为垂直堆叠，并强化折叠行为。
@media (max-width: 768px) { .menu > ul { flex-direction: column; }.menu a {border-bottom: 1px solid #eee;}
.submenu {background-color: #f9f9f9;margin-left: 16px;}}
当屏幕小于768px时，主菜单变为纵向排列，子菜单有缩进和背景色区分层级。这种结构在手机上更易操作。
增强可访问性与用户体验
加入视觉提示，比如三角图标表示可展开，提升用户认知。
.dropdown-toggle::after { content: " ▼"; font-size: 0.7em; vertical-align: middle;}.dropdown-toggle.collapse::after {content: " ▲";}
JS中可在切换时同步修改类名，更新箭头方向：
this.classList.toggle('collapse');
基本上就这些。通过结构化HTML、灵活的CSS过渡、轻量JS控制以及精准的媒体查询，就能构建出既美观又实用的响应式多级菜单。关键是保持层级清晰，交互直观，适配不同设备自然流畅。
以上就是如何在CSS中实现响应式多级菜单_折叠与显示结合媒体查询的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/976682.html
微信扫一扫 
支付宝扫一扫 
