响应式导航栏组件

一个现代化的响应式导航栏，支持移动端菜单和暗黑模式切换，使用纯CSS和JavaScript实现
张开发
2天前发布
128 1.2k 23
HTML CSS JavaScript 响应式
预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .navbar {
            background: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
            gap: 30px;
        }
        
        .nav-link {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-link:hover {
            color: #007bff;
        }
        
        @media (max-width: 768px) {
            .nav-menu {
                position: fixed;
                left: -100%; /* 初始状态隐藏 */
                top: 60px;
                width: 100%;
                height: calc(100vh - 60px);
                background: #fff;
                flex-direction: column;
                justify-content: flex-start;
                padding: 20px 0;
                transition: left 0.3s ease-in-out;
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            }
            .nav-menu.active {
                left: 0;
            }
            .nav-menu li {
                width: 100%;
                text-align: center;
                margin: 10px 0;
            }
            .nav-link {
                display: block;
                padding: 10px 0;
                font-size: 18px;
            }
        }
        
        /* Dark mode styles */
        body.dark .navbar {
            background: #2d3748; /* dark gray */
            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }
        body.dark .logo {
            color: #fff;
        }
        body.dark .nav-link {
            color: #ccc;
        }
        body.dark .nav-link:hover {
            color: #63b3ed; /* light blue */
        }
        body.dark .nav-menu {
            background: #2d3748;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="logo">CodeNav</a>
            <ul class="nav-menu">
                <li><a href="#" class="nav-link">首页</a></li>
                <li><a href="#" class="nav-link">组件</a></li>
                <li><a href="#" class="nav-link">分类</a></li>
                <li><a href="#" class="nav-link">关于我们</a></li>
            </ul>
            <div class="flex items-center space-x-4">
                <button id="darkModeToggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M7 12c0 2.76 2.24 5 5 5s5-2.24 5-5-2.24-5-5-5-5 2.24-5 5zm1.5 0c0-1.93 1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5-3.5-1.57-3.5-3.5zM20 10h2c.55 0 1 .45 1 1v2c0 .55-.45 1-1 1h-2c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1zm-18 0h2c.55 0 1 .45 1 1v2c0 .55-.45 1-1 1H2c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1zm10-7h2c.55 0 1 .45 1 1v2c0 .55-.45 1-1 1h-2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1zm0 18h2c.55 0 1 .45 1 1v2c0 .55-.45 1-1 1h-2c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1zM5.99 4.58l1.41-1.41c.39-.39 1.02-.39 1.41 0s.39 1.02 0 1.41L7.41 5.99c-.39.39-1.02.39-1.41 0s-.39-1.02 0-1.41zm11.31 11.31l1.41 1.41c.39.39.39 1.02 0 1.41s-1.02.39-1.41 0l-1.41-1.41c-.39-.39-.39-1.02 0-1.41s1.02-.39 1.41 0zM4.58 18.01l-1.41 1.41c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0l1.41-1.41c.39-.39.39-1.02 0-1.41s-1.02-.38-1.41 0zm14.16-14.16l1.41-1.41c.39-.39.39-1.02 0-1.41s-1.02-.39-1.41 0l-1.41 1.41c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
                </button>
                <button id="mobileMenuButton" class="lg:hidden p-2 rounded-md text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
                    </svg>
                </button>
            </div>
        </div>
    </nav>

    <!-- Mobile Menu -->
    <div id="mobileMenu" class="fixed top-0 left-0 w-full h-full bg-white dark:bg-gray-800 z-50 transform -translate-x-full transition-transform duration-300 ease-in-out lg:hidden">
        <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
            <a href="#" class="flex-shrink-0 flex items-center">
                <svg class="h-8 w-8 text-primary" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                </svg>
                <span class="ml-2 text-2xl font-bold text-gray-900 dark:text-white">CodeCanvas</span>
            </a>
            <button id="closeMobileMenuButton" class="p-2 rounded-md text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div class="flex flex-col p-4 space-y-4">
            <input type="text" placeholder="搜索代码片段..."
                   class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
            <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors flex items-center justify-center space-x-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                <span>创建新片段</span>
            </button>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">个人中心</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">我的收藏</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">设置</a>
            <button onclick="toggleDarkMode()" class="w-full text-left flex items-center justify-between px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">
                <span>暗黑模式</span>
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2M19.778 5.722l.707-.707M3.464 20.536l.707-.707m0-14.142l-.707-.707m17.678 11.314l.707.707M12 7a5 5 0 100 10 5 5 0 000-10z"/>
                </svg>
            </button>
            <a href="#" class="block px-4 py-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-700 rounded-md">退出登录</a>
        </div>
    </div>

</body>
</html>
目录导航

CodeCanvas - 代码片段分享平台

预览结果：
