响应式导航栏 — HTML/CSS 初学者项目教程

📖 教程步骤

1 HTML 结构

用 <nav> 包裹 logo 和导航链接列表。使用 flexbox 让它们水平排列。

<nav class="navbar">
    <div class="logo">LOGO</div>
    <ul class="nav-links">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">服务</a></li>
    </ul>
</nav>

2 桌面端样式

使用 Flexbox 实现 logo 在左、链接在右的布局。给链接添加悬停效果，用 border-radius 让 hover 背景更柔和。

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e293b;
    padding: 0 1.5rem;
    height: 60px;
}
.nav-links { display: flex; list-style: none; gap: 0.25rem; }
.nav-links a {
    padding: 0.6rem 1rem;
    color: #cbd5e1;
    border-radius: 0.4rem;
    transition: background 0.2s;
}
.nav-links a:hover { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }

3 汉堡菜单（HTML + CSS Checkbox Hack）

添加一个隐藏的 checkbox（#nav-toggle）和对应的汉堡按钮。当 checkbox 被选中时，通过 CSS 选择器 #nav-toggle:checked ~ .nav-links 显示菜单。这是纯 CSS 实现交互的经典技巧。

<input type="checkbox" id="nav-toggle">
<label for="nav-toggle" class="hamburger">
    <span></span><span></span><span></span>
</label>

4 响应式断点

在 700px 处设置媒体查询断点。桌面端隐藏汉堡菜单，移动端隐藏导航链接。当 checkbox 选中时强制显示链接列表。

@media (max-width: 700px) {
    .hamburger { display: flex; }
    .nav-links {
        display: none;
        position: absolute;
        top: 60px; left: 0; right: 0;
        background: #1e293b;
        flex-direction: column;
    }
    #nav-toggle:checked ~ .nav-links { display: flex; }
}

5 汉堡图标动画

当菜单打开时，用 CSS transform 将三条线变成叉号（X）。营造更精致的交互体验。

#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(5px, -5px);
}

6 完成！

现在你有了一个完全响应式的导航栏，桌面版显示完整链接，移动版折叠为汉堡菜单。全部使用纯 HTML + CSS 实现，零 JavaScript。

💡 扩展思路：可以添加下拉子菜单、粘性定位（position: sticky）或者毛玻璃背景效果。

🧭 响应式导航栏

📖 教程步骤