本文详解如何将桌面端导航栏适配移动端，通过 css 媒体查询 + javascript 交互实现响应式汉堡菜单，兼容现代浏览器，无需重写 html 结构。
本文详解如何将桌面端导航栏适配移动端，通过 css 媒体查询 + javascript 交互实现响应式汉堡菜单，兼容现代浏览器，无需重写 html 结构。
要让现有导航栏真正适配移动设备，关键不在于“替换结构”，而在于渐进增强：在保留原有语义化 HTML 的基础上，通过 CSS 媒体查询隐藏桌面菜单、添加汉堡图标，并用轻量 JavaScript 控制菜单展开/收起。以下是完整、可直接运行的实现方案。
✅ 步骤一：增强 HTML 结构（最小侵入式修改）
在
<header class="header"><div class="logo">Waverely Farm</div>
<nav class="navbar"><a href="index.html">Home</a>
<a href="about_us.html">About Us</a>
<a href="services.html">Services</a>
<a href="shop.html">Shop</a>
<a href="contactus.html">Contact Us</a>
</nav><!-- 新增：汉堡图标（默认隐藏，仅移动端显示） --><div class="mobile-menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</header>
? 注意：该图标使用纯 CSS 绘制，无外部依赖，语义清晰，且与 nav 同级，便于 Flex 布局对齐。
✅ 步骤二：完善 CSS —— 桌面端保持原样，移动端切换布局
在原有样式基础上，补充以下规则（重点在 @media (max-width: 768px) 断点）：
/* 汉堡图标基础样式 */
.mobile-menu-icon {
display: none; /* 默认隐藏 */
flex-direction: column;
cursor: pointer;
gap: 4px;
}
.bar {
width: 25px;
height: 3px;
background: #fff;
}
/* 移动端断点：768px 及以下 */
@media (max-width: 768px) {
.header {
padding: 20px 20px; /* 减小左右内边距 */
}
.logo {
font-size: 24px; /* 适配小屏 */
}
/* 隐藏桌面导航栏 */
.navbar {
display: none;
flex-direction: column;
position: absolute;
top: 60px; /* 紧贴 header 底部 */
left: 0;
width: 100%;
background: aquamarine;
text-align: center;
padding: 15px 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.navbar a {
display: block;
margin: 10px 0;
font-size: 16px;
padding: 8px 0;
}
/* 显示汉堡图标 */
.mobile-menu-icon {
display: flex;
}
/* 菜单打开时的样式（通过 class 切换控制） */
.header.mobile-menu-open .navbar {
display: flex;
}
}
⚠️ 关键细节：
- 使用 position: absolute 将移动端菜单定位在 header 下方，避免页面重排；
- .header.mobile-menu-open .navbar 是核心控制规则，依赖 JS 动态添加 mobile-menu-open 类；
- 所有移动端样式均包裹在媒体查询中，确保桌面端完全不受影响。
✅ 步骤三：添加轻量交互逻辑（原生 JavaScript）
在
