本文详解如何使用纯 css（配合媒体查询与 flexbox）将静态导航栏升级为适配 iphone 14 pro 等移动设备的响应式汉堡菜单：logo 固定左对齐，汉堡图标右对齐，点击后平滑展开垂直下拉菜单，包含 home、about us、gallery、contact 等导航项。
本文详解如何使用纯 css（配合媒体查询与 flexbox）将静态导航栏升级为适配 iphone 14 pro 等移动设备的响应式汉堡菜单：logo 固定左对齐，汉堡图标右对齐，点击后平滑展开垂直下拉菜单，包含 home、about us、gallery、contact 等导航项。
要实现真正可用的响应式汉堡菜单，仅靠 <ul> 结构和基础 CSS 是不够的——必须引入语义化 HTML 结构 + CSS 媒体查询 + 伪元素汉堡图标 + :checked 状态控制（无需 JavaScript）。以下是完整、可直接运行的解决方案。
✅ 核心设计原则
- 桌面端：水平导航栏，Logo 左对齐，菜单项居中/右对齐，无汉堡图标
- 移动端（≤ 768px，覆盖 iPhone 14 Pro 屏宽 393px）：隐藏常规菜单，显示右上角汉堡图标；点击后展开垂直下拉菜单
- 无障碍友好：使用 <input type="checkbox"> 配合 <label> 实现纯 CSS 开关逻辑，支持键盘空格/回车触发
? 完整 HTML + CSS 实现
<!-- 推荐结构：用 checkbox 控制菜单显隐 -->
<div class="navbar">
<a href="home.html" class="logo-link">
<img class="logo-img" src="YOGI Logo.svg" alt="YOGI Logo">
</a>
<!-- 汉堡开关（隐藏，仅用于状态控制） -->
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<label for="nav-toggle" class="hamburger">
<span></span>
<span></span>
<span></span>
</label>
<!-- 下拉菜单容器（移动端显示，桌面端内联） -->
<nav class="nav-menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="cta-item">
<a href="contact.html" class="contact-btn">
<img src="Vector.svg" alt="Contact icon">
<span>Contact Us</span>
</a>
</li>
</ul>
</nav>
</div>/* 基础重置与容器 */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.logo-link {
display: block;
margin: 0;
}
.logo-img {
height: 36px;
width: auto;
}
/* 汉堡图标样式 */
.hamburger {
display: none; /* 默认隐藏（桌面端） */
flex-direction: column;
cursor: pointer;
gap: 4px;
}
.hamburger span {
display: block;
width: 26px;
height: 3px;
background: #333;
border-radius: 2px;
transition: all 0.3s ease;
}
/* 移动端菜单容器 */
.nav-menu {
display: flex;
margin-left: auto;
}
.nav-menu ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 1.5rem;
}
.nav-menu a {
text-decoration: none;
color: #333;
font-weight: 500;
padding: 0.5rem 0;
position: relative;
}
.nav-menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s;
}
.nav-menu a:hover::after {
width: 100%;
}
.cta-item .contact-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #007bff;
color: white;
border-radius: 4px;
font-weight: 600;
}
.cta-item .contact-btn img {
height: 18px;
width: auto;
}
/* —— 响应式断点：iPhone 14 Pro 及更小屏幕 —— */
@media (max-width: 768px) {
/* 隐藏桌面菜单，显示汉堡 */
.nav-menu {
display: none;
}
.hamburger {
display: flex;
}
/* 汉堡动画：变为 × */
#nav-toggle:checked + .hamburger span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
#nav-toggle:checked + .hamburger span:nth-child(2) {
opacity: 0;
}
#nav-toggle:checked + .hamburger span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* 展开下拉菜单 */
#nav-toggle:checked ~ .nav-menu {
display: block;
position: absolute;
top: 100%;
right: 1rem;
width: 240px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
overflow: hidden;
z-index: 1000;
}
.nav-menu ul {
flex-direction: column;
width: 100%;
}
.nav-menu ul li {
width: 100%;
}
.nav-menu a {
display: block;
padding: 0.875rem 1.25rem;
border-bottom: 1px solid #f5f5f5;
}
.nav-menu a:last-child {
border-bottom: none;
}
.nav-menu a:hover::after {
width: 0; /* 移动端移除下划线动画，提升触控体验 */
}
.cta-item .contact-btn {
width: 100%;
justify-content: center;
}
}
/* 额外优化：防止移动端滚动时菜单意外关闭 */
@media (max-width: 768px) {
.nav-toggle {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* 确保 checkbox 不影响布局 */
.nav-toggle:focus + .hamburger {
outline: 2px solid #007bff;
}
}⚠️ 关键注意事项
- 不要删除 #nav-toggle 输入框：它是纯 CSS 菜单的状态核心，虽不可见但必不可少；label[for] 与其绑定实现点击切换。
- 图标尺寸适配：iPhone 14 Pro 物理分辨率高（2556×1179），建议 SVG 图标保持 viewBox 清晰，.logo-img 和 .hamburger span 的尺寸已按 2x 视网膜屏优化。
- 触摸目标最小尺寸：所有可点击项（包括汉堡和菜单项）高度 ≥ 44px（iOS 最小推荐触控区域），当前 padding: 0.875rem ≈ 14px × 2 + 行高 ≈ 48px，符合标准。
- 性能提示：避免在 @media 中重复定义大段样式；本方案仅重写必要属性（display、position、flex-direction），确保渲染高效。
✅ 总结
该方案完全基于现代 CSS（Flexbox + :checked + @media），零 JavaScript，兼容 iOS Safari 16+（iPhone 14 Pro 默认系统），同时保持桌面端优雅布局。通过结构语义化、状态解耦与渐进增强，既满足响应式需求，又保障可访问性与维护性。如需添加淡入动画，可在 .nav-menu 上补充 transition: opacity 0.2s, transform 0.2s 并搭配 transform: translateY(-10px) 初始偏移。
