<!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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
        }
        /* 导航条容器 */
        .navbar {
            background-color: #333;
            overflow: hidden;
            position: relative;
        }
        /* 导航链接样式 */
        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        /* 鼠标悬停效果 */
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
        /* 当前页面高亮 */
        .active {
            background-color: #4CAF50;
        }
        /* 汉堡菜单按钮 */
        .navbar .menu-icon {
            display: none;
            cursor: pointer;
            float: right;
            padding: 14px 16px;
        }
        /* 汉堡菜单图标 */
        .navbar .menu-icon .bar {
            display: block;
            width: 25px;
            height: 3px;
            background-color: white;
            margin: 5px 0;
            transition: 0.3s;
        }
        /* 响应式设计 */
        @media screen and (max-width: 600px) {
            /* 隐藏菜单链接 */
            .navbar a {
                display: none;
            }
            /* 显示汉堡菜单按钮 */
            .navbar .menu-icon {
                display: block;
            }
            /* 汉堡菜单激活状态 */
            .navbar.responsive {
                position: relative;
            }
            .navbar.responsive .menu-icon {
                position: absolute;
                right: 0;
                top: 0;
            }
            /* 激活状态下显示菜单 */
            .navbar.responsive a {
                float: none;
                display: block;
                text-align: left;
            }
        }
    </style>
</head>
<body>
    <!-导航条 -->
    <div class="navbar" id="myNavbar">
        <a href="#" class="active">首页</a>
        <a href="#">关于我们</a>
        <a href="#">服务</a>
        <a href="#">产品</a>
        <a href="#">博客</a>
        <a href="#">联系我们</a>
        <!-汉堡菜单按钮 -->
        <a href="javascript:void(0);" class="menu-icon" onclick="toggleMenu()">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
    </div>
    <!-页面内容 -->
    <div style="padding:20px;">
        <h2>响应式导航条示例</h2>
        <p>调整浏览器窗口大小查看响应式效果</p>
        <p>当屏幕宽度小于600px时，导航条会转换为汉堡菜单</p>
    </div>
    <script>
        // 切换菜单显示状态
        function toggleMenu() {
            const navbar = document.getElementById("myNavbar");
            navbar.classList.toggle("responsive");
        }
    </script>
</body>
</html>

功能说明：

  1. 桌面端显示：水平导航菜单，包含首页、关于我们等6个链接
  2. 移动端显示：自动转换为汉堡菜单，点击展开所有导航选项
  3. 交互效果：
    • 鼠标悬停时菜单项背景变色
    • 当前页面高亮显示（绿色背景）
    • 汉堡菜单图标可点击展开/收起

使用方法：

  1. 将上述代码保存为HTML文件（如navbar.html）
  2. 用浏览器打开文件即可查看效果
  3. 调整浏览器窗口大小测试响应式效果

自定义修改：

  • 修改颜色：修改.navbar的background-color和.active的背景色
  • 添加菜单项：在<div class="navbar">内添加<a>
  • 调整断点：修改@media中的max-width值改变响应式触发尺寸
  • 添加图标：在.menu-icon内添加图标库（如Font Awesome）

如需更高级的功能（如下拉菜单、搜索框等），可以基于此代码进一步扩展。

哪里能下载到实用的网页导航条源码？

哪里能下载到实用的网页导航条源码？

哪里能下载到实用的网页导航条源码？

相关内容

回顶部