下面我将为您详细解释如何实现这种效果,并提供一个完整、可以直接运行的代码示例。

HTML5网页缩小导航栏不一样
（图片来源网络，侵删）

核心实现思路

要实现这种效果,主要涉及三个部分：

  1. HTML (结构):

    • 一个包裹整个导航的容器（<nav>）。
    • 一个用于触发菜单展开/收起的按钮（通常是“汉堡”图标）。
    • 一个包含所有导航链接的列表（<ul>）。
    • 在默认情况下,这个列表是隐藏的，只有当屏幕变窄时，我们才通过CSS让它显示出来。

  2. CSS (样式):

    • 桌面视图: 导航链接水平排列，汉堡菜单按钮隐藏。
    • 移动视图:
      • 导航链接垂直排列或隐藏。
      • 汉堡菜单按钮显示。
      • 当用户点击汉堡按钮后,通过添加一个类（.active）来触发导航链接的显示。

  3. JavaScript (交互):

    HTML5网页缩小导航栏不一样
    （图片来源网络，侵删）
    • 监听汉堡菜单按钮的点击事件。
    • 当点击时,给导航容器添加或移除一个特定的类（.active）。
    • CSS会根据这个.active类的有无，来控制导航菜单的显示和隐藏。

完整代码示例

您可以直接将以下代码保存为一个 .html 文件，然后用浏览器打开，调整窗口大小来查看效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">响应式导航栏示例</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
        }
        /* 导航栏容器 */
        .navbar {
            background-color: #333;
            overflow: hidden; /* 防止子元素溢出 */
        }
        /* 导航链接容器 */
        .navbar .nav-links {
            display: flex; /* 使用Flexbox实现水平排列 */
            list-style: none;
        }
        /* 导航链接样式 */
        .navbar .nav-links li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }
        /* 鼠标悬停效果 */
        .navbar .nav-links li a:hover {
            background-color: #555;
        }
        /* 汉堡菜单按钮 */
        .hamburger {
            display: none; /* 默认在桌面视图下隐藏 */
            cursor: pointer;
            position: absolute; /* 绝对定位，方便放在右上角 */
            right: 20px;
            top: 20px;
            z-index: 10; /* 确保按钮在菜单上方 */
        }
        .hamburger span {
            display: block;
            width: 25px;
            height: 3px;
            background-color: white;
            margin: 5px 0;
            transition: 0.3s;
        }
        /* --- 响应式设计的关键部分 --- */
        /* 当屏幕宽度小于或等于 768px 时（移动设备） */
        @media (max-width: 768px) {
            /* 1. 显示汉堡按钮 */
            .hamburger {
                display: block;
            }
            /* 2. 隐藏导航链接 */
            .navbar .nav-links {
                display: none; /* 先隐藏 */
                flex-direction: column; /* 改为垂直排列 */
                position: absolute; /* 绝对定位以覆盖整个宽度 */
                top: 70px; /* 放在汉堡按钮下方 */
                left: 0;
                width: 100%;
                background-color: #333;
            }
            /* 3. 当添加了 .active 类时，显示导航链接 */
            .navbar.active .nav-links {
                display: flex; /* 使用flex显示 */
            }
        }
        /* 可选：当菜单展开时，给汉堡图标添加动画效果，变成 'X' */
        .navbar.active .hamburger span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }
        .navbar.active .hamburger span:nth-child(2) {
            opacity: 0;
        }
        .navbar.active .hamburger span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <!-- 汉堡菜单按钮 -->
        <div class="hamburger" id="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <!-- 导航链接列表 -->
        <ul class="nav-links">
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#services">服务</a></li>
            <li><a href="#portfolio">作品集</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>
    <div style="padding: 20px; text-align: center;">
        <h1>响应式导航栏演示</h1>
        <p>尝试调整浏览器窗口的大小，观察导航栏的变化。</p>
    </div>
    <script>
        // 获取汉堡菜单按钮和导航栏元素
        const hamburger = document.getElementById('hamburger');
        const navbar = document.querySelector('.navbar');
        // 为汉堡按钮添加点击事件监听器
        hamburger.addEventListener('click', () => {
            // 切换 .active 类
            navbar.classList.toggle('active');
        });
    </script>
</body>
</html>

代码分步解析

HTML 结构

  • <nav class="navbar">: 整个导航栏的容器。
  • <div class="hamburger">: 这个 div 里面有三个 <span>，它们通过CSS样式组合成了“三条横线”的汉堡图标。
  • <ul class="nav-links">: 包含所有导航链接的无序列表。
  • 关键点: 汉堡按钮和导航链接是兄弟关系，都包含在 navbar 内，这使得我们可以通过给 navbar 添加一个类来同时控制按钮的动画和菜单的显示。

CSS 样式

  • 桌面视图:
    • .nav-links { display: flex; }: 这是让链接水平排列的关键。
    • .hamburger { display: none; }: 默认隐藏汉堡按钮。
  • 移动视图 (媒体查询 @media (max-width: 768px))
    • .hamburger { display: block; }: 在小屏幕上显示汉堡按钮。
    • .nav-links { display: none; }: 在小屏幕上，默认隐藏导航链接列表。
    • .navbar.active .nav-links { display: flex; }: 这是最核心的一句，它表示：当 navbar 这个元素拥有 .active 这个类时，才显示 .nav-links。.navbar.active 这种写法叫做“后代选择器”，确保只有被激活的导航栏才会展开其菜单。
    • 汉堡图标动画: 这部分是可选的，但能极大地提升用户体验，通过 .navbar.active 状态来改变三条横线的位置和透明度，使其变成一个 "X"。

JavaScript 交互

  • const hamburger = document.getElementById('hamburger');: 获取汉堡按钮的DOM元素。
  • const navbar = document.querySelector('.navbar');: 获取导航栏的DOM元素。
  • hamburger.addEventListener('click', () => { ... });: 监听汉堡按钮的点击事件。
  • navbar.classList.toggle('active');: toggle 方法是神来之笔，它会检查 navbar 是否已经有 active 类。
    • 如果没有,就添加它。
    • 如果有,就移除它。
    • 这完美地实现了点击一次展开,再点击一次收起的功能。

总结与扩展

这个示例是一个经典且功能完整的响应式导航栏实现,您可以根据自己的需求进行修改和扩展：

  • 美化: 更改颜色、字体、添加阴影等。
  • 功能: 在移动菜单中添加搜索框、登录按钮等。
  • 动画: 使用更复杂的CSS动画让菜单滑入滑出，而不是简单的显示/隐藏。
  • 无障碍: 为汉堡按钮和链接添加 aria-label 和 aria-expanded 等属性，提升网站的可访问性。

希望这个详细的解释和示例能帮助您理解并实现您想要的“缩小导航栏不一样”的效果！

HTML5网页缩小导航栏不一样
（图片来源网络，侵删）