响应式导航通过媒体查询在小屏时隐藏横排菜单，结合CSS或JavaScript实现汉堡菜单展开功能，提升移动端体验。
在响应式网页设计中，导航菜单的折叠功能是提升移动端用户体验的关键。屏幕变小时，传统横排导航会挤占空间甚至错位，这时需要通过CSS媒体查询结合隐藏与显示技巧，将导航收起为“汉堡菜单”，点击后展开。实现这一效果不依赖JavaScript也能完成，但加上JS能获得更流畅交互。
使用CSS媒体查询控制显示断点
媒体查询（@media）是响应式布局的核心工具。通过设定屏幕宽度临界点，可以切换导航的布局方式。
例如，在桌面端显示横向菜单，在768px以下切换为垂直堆叠并隐藏：
nav ul { list-style: none; padding: 0; display: flex;}@media (max-width: 768px) {nav ul {flex-direction: column;display: none; / 默认隐藏 /}.menu-toggle {display: block; / 显示汉堡按钮 /}}
利用隐藏与伪类实现纯CSS折叠
如果不想引入JavaScript，可以用复选框配合
立即学习“前端免费学习笔记（深入）”；
结构示例：
CSS控制显示：
瞬映
AI 快速创作数字人视频，一站式视频创作平台，让视频创作更简单。
57 查看详情
.menu-checkbox { display: none;}.menu-checkbox:checked ~ .nav-menu { display: flex;}@media (min-width: 769px) { .menu-icon, .menu-checkbox { display: none; } .nav-menu { display: flex !important; }}
添加JavaScript增强交互体验
更常见的做法是用JavaScript控制class切换，代码更清晰，也便于扩展动画或过渡效果。
给菜单按钮绑定点击事件：
document.querySelector('.menu-toggle').addEventListener('click', function() { document.querySelector('.nav-menu').classList.toggle('show');});
配合CSS定义.show类的样式：
.nav-menu.show { display: flex;}
还可以加入过渡动画让展开更自然：
.nav-menu { transition: max-height 0.3s ease; overflow: hidden;}
基本上就这些。关键在于合理设置媒体查询断点，选择适合项目的显隐控制方式——纯CSS适合轻量需求，JavaScript更适合复杂交互。搭配flex布局和移动优先原则，能让导航在各种设备上都表现良好。
以上就是响应式网页中导航菜单如何折叠_CSS媒体查询与隐藏显示技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/971626.html
微信扫一扫 
支付宝扫一扫 
