<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的导航页</title>
<!-- 添加 Font Awesome CDN -->
<link rel="stylesheet" href="./css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f5f6f7;
color: #333;
}
/* 添加全局滚动条样式 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* 针对Firefox的滚动条样式 */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
.container {
max-width: 1200px;
padding: 0 20px;
margin: 0 auto;
margin-left: 250px;
transition: margin-left 0.3s ease;
margin-top: 74px;
}
.container.sidebar-collapsed {
margin-left: 60px;
}
.header {
text-align: center;
padding: 40px 0;
}
.search-box {
max-width: 600px;
margin: 0 auto 40px;
position: relative;
}
.search-input {
width: 100%;
padding: 15px 20px;
border: 2px solid #e0e0e0;
border-radius: 30px;
font-size: 16px;
outline: none;
transition: all 0.3s;
}
.search-input:focus {
border-color: #1890ff;
box-shadow: 0 0 10px rgba(24, 144, 255, 0.2);
}
.nav-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
padding: 20px 0;
}
.nav-category {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.category-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
color: #1890ff;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
}
.nav-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.nav-link {
display: flex;
align-items: center;
padding: 8px;
text-decoration: none;
color: #666;
border-radius: 5px;
transition: all 0.3s;
}
.nav-link:hover {
background-color: #f5f6f7;
color: #1890ff;
}
.nav-link img {
width: 20px;
height: 20px;
margin-right: 8px;
}
/* 添加左侧菜单样式 */
.sidebar {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 250px;
background: white;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 1000;
overflow-y: auto;
overflow-x: hidden;
}
/* 统一滚动条样式 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
/* 移除重复的侧边栏滚动条样式 */
.sidebar-menu {
padding-bottom: 20px;
}
/* 简化侧边栏收起状态样式 */
.sidebar.collapsed {
width: 60px;
}
.sidebar.collapsed .sidebar-item-header span,
.sidebar.collapsed .arrow,
.sidebar.collapsed .sidebar-submenu {
display: none;
}
.sidebar.collapsed .menu-icon {
margin: 0;
width: 100%;
font-size: 20px;
}
.sidebar.collapsed .sidebar-item-header {
padding: 15px 0;
justify-content: center;
}
/* 简化切换按钮样式 */
.sidebar-toggle {
/* position: fixed; */
left: 250px;
top: 0;
z-index: 1001;
background: white;
border: none;
border-radius: 0 0 5px 5px;
padding: 10px;
cursor: pointer;
transition: left 0.3s ease;
}
.sidebar-toggle.collapsed {
left: 60px;
}
/* 添加箭头图标样式 */
.arrow {
transition: transform 0.3s ease;
display: inline-block;
font-size: 18px;
transform: rotate(90deg);
}
.sidebar-item.open .arrow {
transform: rotate(0deg);
}
/* 修改一级菜单样式 */
.sidebar-item {
padding: 0;
cursor: pointer;
transition: all 0.3s;
display: flex;
flex-direction: column;
}
.sidebar-item-header {
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s;
}
.sidebar-item-header:hover {
background: #f5f6f7;
color: #1890ff;
}
.sidebar-item.active .sidebar-item-header {
background: #e6f7ff;
color: #1890ff;
border-right: 3px solid #1890ff;
}
/* 修改二级菜单基础样式 */
.sidebar-submenu {
position: absolute;
left: 60px;
background: white;
min-width: 150px;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
display: none;
z-index: 1002;
}
/* 二级菜单项样式 */
.sidebar-submenu-item {
padding: 12px 20px 12px 30px;
cursor: pointer;
transition: all 0.3s;
color: #666;
white-space: nowrap;
}
.sidebar-submenu-item:hover {
color: #1890ff;
background: #f5f6f7;
}
/* 收起状态下的悬浮菜单样式 */
.sidebar.collapsed .sidebar-item:hover .sidebar-submenu {
display: block;
position: fixed;
left: 60px;
}
/* 展开状态下的二级菜单样式 */
.sidebar:not(.collapsed) .sidebar-submenu {
position: static;
box-shadow: none;
border-radius: 0;
display: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.sidebar:not(.collapsed) .sidebar-item.open .sidebar-submenu {
display: block;
max-height: 500px;
}
.sidebar:not(.collapsed) .sidebar-submenu-item {
padding-left: 50px;
}
/* 修改箭头在收起状态下的显示 */
.sidebar.collapsed .arrow {
display: none;
}
/* 调整收起状态下的图标样式 */
.sidebar.collapsed .sidebar-item-header {
padding: 15px 0;
}
/* 优化悬浮菜单的显示效果 */
.sidebar.collapsed .sidebar-submenu {
padding: 5px 0;
margin-top: 0;
}
/* 修改一级菜单图标样式 */
.menu-icon {
margin-right: 10px;
width: 20px;
text-align: center;
color: #666;
}
.sidebar-item.active .menu-icon {
color: #1890ff;
}
.sidebar-item-header {
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s;
}
.sidebar-item-header .left-content {
display: flex;
align-items: center;
}
/* 添加固定顶部header样式 */
.fixed-header {
position: fixed;
top: 0;
right: 0;
left: 250px;
height: 74px;
background: white;
z-index: 999;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: left 0.3s ease;
display: flex;
align-items: center;
padding: 0 20px;
}
/* 当侧边栏收起时，调整header的左边距 */
.fixed-header.sidebar-collapsed {
left: 60px;
}
/* 添加 header-content 样式 */
.header-content {
margin-left: 20px;
}
/* 修改中等尺寸的媒体查询样式 */
@media (max-width: 1024px) and (min-width: 769px) {
.container {
margin-left: 250px;
}
.container.sidebar-collapsed {
margin-left: 60px;
}
.fixed-header {
left: 250px;
}
.fixed-header.sidebar-collapsed {
left: 60px;
}
.sidebar {
width: 250px;
}
.sidebar.collapsed {
width: 60px;
}
.sidebar.collapsed .sidebar-item-header span,
.sidebar.collapsed .arrow,
.sidebar.collapsed .sidebar-submenu {
display: none;
}
.sidebar.collapsed .menu-icon {
margin: 0;
width: 100%;
font-size: 20px;
}
.sidebar.collapsed .sidebar-item-header {
padding: 15px 0;
justify-content: center;
}
}
/* 修改移动端媒体查询的起始点 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-250px);
width: 250px;
}
.sidebar.collapsed {
transform: translateX(-60px);
width: 60px;
}
.container {
margin-left: 0;
max-width: 100%;
padding: 0 15px;
}
.container.sidebar-collapsed {
margin-left: 0;
max-width: 100%;
}
.sidebar-toggle {
position: static;
margin-left: 20px;
}
.sidebar-toggle.collapsed {
left: 0;
}
.fixed-header {
left: 0;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.container {
margin-left: 0;
max-width: 100%;
padding: 0 15px;
}
.header-content {
margin-left: 0;
margin-right: auto;
}
}
</style>
</head>
<body>
<!-- 添加侧边栏 -->
<div class="sidebar">
<div class="sidebar-menu">
<div class="sidebar-item">
<div class="sidebar-item-header">
<div class="left-content">
<i class="menu-icon fas fa-home"></i>
<span>首页</span>
</div>
</div>
</div>
<div class="sidebar-item">
<div class="sidebar-item-header">
<div class="left-content">
<i class="menu-icon fas fa-robot"></i>
<span>AI 工具</span>
</div>
<span class="arrow">⌵</span>
</div>
<div class="sidebar-submenu">
<div class="sidebar-submenu-item">ChatGPT</div>
<div class="sidebar-submenu-item">Claude</div>
<div class="sidebar-submenu-item">Midjourney</div>
</div>
</div>
<div class="sidebar-item">
<div class="sidebar-item-header">
<div class="left-content">
<i class="menu-icon fas fa-code"></i>
<span>开发工具</span>
</div>
<span class="arrow">⌵</span>
</div>
<div class="sidebar-submenu">
<div class="sidebar-submenu-item">GitHub</div>
<div class="sidebar-submenu-item">Stack Overflow</div>
<div class="sidebar-submenu-item">VS Code</div>
</div>
</div>
<div class="sidebar-item">
<div class="sidebar-item-header">
<div class="left-content">
<i class="menu-icon fas fa-graduation-cap"></i>
<span>学习资源</span>
</div>
<span class="arrow">⌵</span>
</div>
<div class="sidebar-submenu">
<div class="sidebar-submenu-item">哔哩哔哩</div>
<div class="sidebar-submenu-item">掘金</div>
<div class="sidebar-submenu-item">知乎</div>
</div>
</div>
</div>
</div>
<div class="fixed-header">
<button class="sidebar-toggle">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
</button>
<div class="header-content"><h1>我的导航</h1></div>
</div>
<div class="container">
<div class="search-box">
<input type="text" class="search-input" placeholder="搜索导航...">
</div>
<div class="nav-grid">
<!-- AI工具类 -->
<div class="nav-category">
<h2 class="category-title">AI 工具</h2>
<div class="nav-links">
<a href="https://chat.openai.com" class="nav-link">
<img src="https://chat.openai.com/favicon.ico" alt="ChatGPT">
<span>ChatGPT</span>
</a>
<a href="https://claude.ai" class="nav-link">
<img src="https://claude.ai/favicon.ico" alt="Claude">
<span>Claude</span>
</a>
</div>
</div>
<!-- 开发工具类 -->
<div class="nav-category">
<h2 class="category-title">开发工具</h2>
<div class="nav-links">
<a href="https://github.com" class="nav-link">
<img src="https://github.com/favicon.ico" alt="GitHub">
<span>GitHub</span>
</a>
<a href="https://stackoverflow.com" class="nav-link">
<img src="https://stackoverflow.com/favicon.ico" alt="Stack Overflow">
<span>Stack Overflow</span>
</a>
</div>
</div>
<!-- 学习资源类 -->
<div class="nav-category">
<h2 class="category-title">学习资源</h2>
<div class="nav-links">
<a href="https://www.bilibili.com" class="nav-link">
<img src="https://www.bilibili.com/favicon.ico" alt="哔哩哔哩">
<span>哔哩哔哩</span>
</a>
<a href="https://juejin.cn" class="nav-link">
<img src="https://juejin.cn/favicon.ico" alt="掘金">
<span>掘金</span>
</a>
</div>
</div>
</div>
</div>
<!-- 添加 JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const sidebar = document.querySelector('.sidebar');
const container = document.querySelector('.container');
const sidebarToggle = document.querySelector('.sidebar-toggle');
const fixedHeader = document.querySelector('.fixed-header');
// 统一处理侧边栏切换
function toggleSidebar(isMobile) {
if (isMobile) {
const isVisible = sidebar.style.transform === 'translateX(0px)';
sidebar.style.transform = isVisible ? 'translateX(-250px)' : 'translateX(0px)';
} else {
sidebar.classList.toggle('collapsed');
container.classList.toggle('sidebar-collapsed');
sidebarToggle.classList.toggle('collapsed');
fixedHeader.classList.toggle('sidebar-collapsed');
if (sidebar.classList.contains('collapsed')) {
document.querySelectorAll('.sidebar-item.open').forEach(item => {
item.classList.remove('open');
});
}
}
}
// 切换按钮点击事件
sidebarToggle.addEventListener('click', function(e) {
e.stopPropagation();
toggleSidebar(window.innerWidth <= 768);
});
// 菜单项点击处理
document.querySelectorAll('.sidebar-item').forEach(item => {
const header = item.querySelector('.sidebar-item-header');
if (header) {
header.addEventListener('click', function() {
if (!sidebar.classList.contains('collapsed')) {
document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
item.classList.add('active');
if (item.querySelector('.sidebar-submenu')) {
item.classList.toggle('open');
}
}
});
}
});
// 二级菜单点击处理
document.querySelectorAll('.sidebar-submenu-item').forEach(item => {
item.addEventListener('click', function(e) {
e.stopPropagation();
document.querySelectorAll('.sidebar-submenu-item').forEach(i => i.classList.remove('active'));
this.classList.add('active');
});
});
// 移动端容器点击处理
if (window.innerWidth <= 768) {
container.addEventListener('click', function() {
if (sidebar.style.transform === 'translateX(0px)') {
sidebar.style.transform = 'translateX(-250px)';
}
});
}
// 响应式处理
window.addEventListener('resize', function() {
const isMobile = window.innerWidth <= 768;
if (isMobile) {
// 移动端特殊处理
sidebar.classList.remove('collapsed');
container.classList.remove('sidebar-collapsed');
sidebarToggle.classList.remove('collapsed');
fixedHeader.classList.remove('sidebar-collapsed');
sidebar.style.transform = 'translateX(-250px)';
} else {
// 非移动端统一处理
sidebar.style.transform = '';
const isCollapsed = sidebar.classList.contains('collapsed');
container.classList.toggle('sidebar-collapsed', isCollapsed);
sidebarToggle.classList.toggle('collapsed', isCollapsed);
fixedHeader.classList.toggle('sidebar-collapsed', isCollapsed);
}
});
});
</script>
</body>
</html>
转载请注明：SuperIT » cursor生成的一个页面
