使用媒体查询与Flexbox实现响应式导航，结合汉堡菜单提升移动端体验。
制作响应式导航栏的关键在于让导航在不同屏幕尺寸下都能良好显示，尤其在移动设备上能折叠或隐藏。以下是几种常用方法：
使用媒体查询（Media Queries）
通过 @media 查询，根据屏幕宽度调整导航栏布局。
例如：- 桌面端显示为横向菜单
- 移动端则变为垂直堆叠或隐藏成“汉堡菜单”
示例代码：
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
}
使用 Flexbox 布局
Flexbox 能让导航项自动适应容器空间，是实现响应式的理想选择。
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex让菜单项水平排列 - 配合
flex-wrap: wrap允许换行 - 结合
justify-content控制对齐方式
添加汉堡菜单（Hamburger Menu）
在小屏幕上隐藏菜单项，用一个按钮触发显示。
jquery带商品分类侧边栏列表的商城导航菜单
下载
这是一款使用jquery制作的带商品分类侧边栏列表的商城导航菜单。该商城菜单兼容ie8浏览器。用户可以通过点击左侧的下拉菜单来查看各种商品的列表，非常实用和方便。 使用方法 在页面中引入样式文件style.css和jquery.min.js文件。
- 使用
☰或伪元素创建图标 - 通过 JavaScript 切换菜单的可见性
- 用 CSS 控制展开与收起动画
结构建议：
CSS 中给 .menu 添加 display: none，在小屏时通过 JS 添加类名使其显示。
使用 CSS Grid（可选）
对于更复杂的布局，可用 Grid 定义区域和自适应列。
- 适合多层级或带下拉菜单的导航
- 配合媒体查询动态调整网格结构
基本上就这些。核心是结合 Flexbox 和媒体查询，再加一点交互逻辑，就能做出流畅的响应式导航栏。不复杂但容易忽略细节，比如移动端点击区域太小、字体缩放等问题，记得测试真机效果。
