响应式导航栏组件
一个现代化的响应式导航栏，支持移动端菜单和暗黑模式切换
128
1.2k
HTML
CSS
JavaScript
动态表单验证
实时表单验证组件，支持多种验证规则和自定义错误提示
89
856
HTML
JavaScript
表单
CSS动画按钮集合
20种精美的CSS动画按钮效果，包含悬停、点击等交互动画
256
2.1k
CSS
动画
按钮
响应式卡片布局
Flexbox和Grid结合的响应式卡片布局系统
167
1.5k
CSS
布局
热门标签
React
Vue
JavaScript
CSS
动画
组件
推荐作者
张全栈
前端架构师
李UI
UI设计师
最新动态
王开发 收藏了
响应式导航栏组件
2分钟前
刘前端 发布了新的代码片段
5分钟前
陈设计 点赞了
CSS动画按钮集合
10分钟前
实时预览
响应式导航栏组件
一个现代化的响应式导航栏，支持移动端菜单和暗黑模式切换，使用纯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>评论 (23)
前端小白
1小时前这个导航栏组件设计得非常棒，响应式效果很好，代码也很清晰易懂！
代码狂人
3小时前感谢分享！我正在找一个适合项目的导航栏，这个可以参考一下。