响应式Header导航栏源码分享

第一，首先创建基本的脚手架html代码，（如果本地有fontawesome-free-5.15.4-web的图标文件的，可以直接引入，如果没有那就使用图标代替搜索图标search-icon）

<nav class="navbar">
        <div class="nav-container">
            <button class="menu-toggle">☰</button>

            <div class="nav-logo">
                <a href="#">
                    小言心
                </a>
            </div>

            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link active" data-index="0">首页</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" data-index="1">发现</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" data-index="2">等你来答</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" data-index="3">会员</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" data-index="4">Live</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" data-index="5">书店</a>
                </li>
            </ul>

            <!-- 高亮条 -->
            <div class="highlight-bar"></div>

            <div class="search-container">
                <input type="text" class="search-box" placeholder="搜索小言心内容">
                <button class="search-icon " type="button" aria-label="搜索">
                    <i class="fas fa-search"></i>
                </button>
            </div>

            <div class="nav-actions">

                <div class="dropdown">
                    <div class="user-avatar">知</div>
                    <div class="dropdown-content">
                        <a href="#" class="dropdown-item">我的主页</a>
                        <a href="#" class="dropdown-item">私信</a>
                        <a href="#" class="dropdown-item">创作中心</a>
                        <a href="#" class="dropdown-item">设置</a>
                        <a href="#" class="dropdown-item">退出</a>
                    </div>
                </div>
                <button class="nav-button">提问</button>
            </div>
        </div>
    </nav>

二，创建基本的style样式

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        body {
            background-color: #f6f6f6;
            padding: 0;
            margin: 0;
        }

        .navbar {
            background-color: #ffffff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
            padding: 7px 16px;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            height: 52px;
            position: relative;
        }

        .nav-logo {
            margin-right: 20px;
        }

        .nav-logo a {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #0084ff;
            font-size: 24px;
            font-weight: 600;
        }


        .nav-menu {
            display: flex;
            list-style: none;
            margin-right: auto;
            position: relative;
        }

        .nav-item {
            margin-right: 20px;
            position: relative;
        }

        .nav-link {
            text-decoration: none;     color: #373a40;
            font-size: 15px;
            padding: 16px 0;
            display: inline-block;
            position: relative;
            transition: color 0.3s;
            cursor: pointer;
        }

        .nav-link:hover {
            transition: 0.3s ease-in;
            font-weight: 600;
        }

        .nav-link.active { 
            font-weight: 600;
            color: #191B1F;
        }

        /* 高亮条 */
        .highlight-bar {
            position: absolute;
            bottom: 0;
            height: 3px;
            background-color: #0084ff;
            transition: all 0.3s ease;
            border-radius: 1.5px;
        }

        .search-container {
            position: relative;
            margin-right: 20px;
            flex: 0 1 400px;
        }

        .search-box {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ebebeb;
            border-radius: 20px;
            background-color: #f6f6f6;
            font-size: 14px;
            outline: none;
            transition: all 0.3s;
        }

        .search-box:focus {
            background-color: #fff;
            border-color: #0084ff;
        }

        .search-icon {
            color: #0077e6;
            border-bottom-right-radius: 9999px;
            border-top-right-radius: 9999px;
            position: absolute;
            right: -1px;

            background: transparent;
            border-bottom-left-radius: 0;
            border-color: transparent;
            border-top-left-radius: 0;
            margin-left: 12px;
            padding: 0 12px;

            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            line-height: 32px;
        }

        .nav-actions {
            display: flex;
            align-items: center;
        }

        .nav-button {
            background-color: #0084ff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            margin-left: 16px;
            transition: background-color 0.3s;
        }

        .nav-button:hover {
            background-color: #0077e6;
        }


        .user-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #0084ff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-left: 16px;
            cursor: pointer;
        }

        /* 下拉菜单样式 */
        .dropdown {
            position: relative;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: white;
            min-width: 160px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            z-index: 999999;
            padding: 8px 0;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-item {
            padding: 10px 16px;
            text-decoration: none;
            display: block;
            color: #121212;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .dropdown-item:hover {
            background-color: #f6f6f6;
        }

        /* 移动端菜单按钮 */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #8590a6;
            margin-right: 10px;
        }

        /* 响应式设计 - 平板端 */
        @media (max-width: 1024px) {
            .search-container {
                flex: 0 1 300px;
            }

            .nav-item {
                margin-right: 15px;
            }
        }

        /* 响应式设计 - 移动端 */
        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }

            .nav-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background-color: white;
                flex-direction: column;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                z-index: 1001;
                padding: 10px 0;
            }

            .nav-menu.active {
                display: flex;
            }

            .nav-item {
                margin: 0;
                width: 100%;
            }

            .nav-link {
                padding: 12px 16px;
                width: 100%;
                display: block;
                border-bottom: 1px solid #f0f0f0;
            }

            .nav-link:last-child {
                border-bottom: none;
            }

            .search-container {
                flex: 1;
                margin-right: 10px;
                order: 3;
            }

            .nav-logo {
                order: 2;
                /* margin-right: 0; */
                margin: 0 10px;
                flex: 0 0 auto;
            }

            .menu-toggle {
                order: 1;
            }

            .nav-actions {
                display: none;
            }

            .highlight-bar {
                display: none;
            }
        }

        /* 响应式设计 - 小屏幕移动端 */
        @media (max-width: 480px) {
            .navbar {
                padding: 0 10px;
            }

            .nav-logo a {
                font-size: 20px;
            }



            .search-container {
                margin-right: 5px;
            }
        }

四，点击active状态js代码标记

document.addEventListener('DOMContentLoaded', function () {
            // 获取元素
            const navLinks = document.querySelectorAll('.nav-link');
            const highlightBar = document.querySelector('.highlight-bar');
            const menuToggle = document.querySelector('.menu-toggle');
            const navMenu = document.querySelector('.nav-menu');
            const navContainer = document.querySelector('.nav-container');

            // 防抖函数，优化窗口大小改变时的性能
            function debounce(func, wait) {
                let timeout;
                return function () {
                    const context = this;
                    const args = arguments;
                    clearTimeout(timeout);
                    timeout = setTimeout(() => {
                        func.apply(context, args);
                    }, wait);
                };
            }

            // 初始化高亮条位置
            function initHighlightBar() {
                const activeLink = document.querySelector('.nav-link.active');
                if (activeLink && window.innerWidth > 768) {
                    moveHighlightBar(activeLink);
                } else {
                    highlightBar.style.display = 'none';
                }
            }

            // 移动高亮条到指定元素
            function moveHighlightBar(targetElement) {
                if (window.innerWidth <= 768) {
                    highlightBar.style.display = 'none';
                    return;
                }

                highlightBar.style.display = 'block';

                const linkRect = targetElement.getBoundingClientRect();
                const containerRect = navContainer.getBoundingClientRect();

                highlightBar.style.width = linkRect.width + 'px';
                highlightBar.style.left = (linkRect.left - containerRect.left) + 'px';

                // 移除所有active类
                navLinks.forEach(link => {
                    link.classList.remove('active');
                });

                // 添加active类到当前元素
                targetElement.classList.add('active');
            }

            // 为每个导航链接添加点击事件
            navLinks.forEach(link => {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    moveHighlightBar(this);

                    // 在移动端点击后关闭菜单
                    if (window.innerWidth <= 768) {
                        navMenu.classList.remove('active');
                    }
                });
            });

            // 菜单切换按钮事件
            menuToggle.addEventListener('click', function () {
                navMenu.classList.toggle('active');
            });

            // 窗口大小改变时重新定位高亮条
            window.addEventListener('resize', debounce(function () {
                initHighlightBar();
            }, 100));

            // 点击页面其他区域关闭移动端菜单
            document.addEventListener('click', function (e) {
                if (window.innerWidth <= 768 &&
                    !navMenu.contains(e.target) &&
                    !menuToggle.contains(e.target) &&
                    navMenu.classList.contains('active')) {
                    navMenu.classList.remove('active');
                }
            });

            // 初始化
            initHighlightBar();
        });

提示