创意侧边栏导航_侧边导航大全-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148339165

<!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;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
display: flex;
min-height: 100vh;
background-color: #f5f7fa;
}

/* 侧边栏样式 */
.sidebar {
width: 250px;
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
height: 100vh;
position: fixed;
padding: 20px 0;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
z-index: 100;
}

.sidebar-header {
text-align: center;
padding: 20px 0;
margin-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-header h2 {
font-size: 1.5rem;
font-weight: 600;
}

.nav-menu {
list-style: none;
}

.nav-item {
position: relative;
margin: 5px 15px;
border-radius: 5px;
overflow: hidden;
}

.nav-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
background-color: rgba(255, 255, 255, 0.2);
}

.nav-link {
display: flex;
align-items: center;
padding: 12px 15px;
color: white;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s;
}

.nav-icon {
width: 24px;
height: 24px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
}

/* 平面图标设计 */
.icon-dashboard {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>') no-repeat center;
}

.icon-profile {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>') no-repeat center;
}

.icon-messages {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>') no-repeat center;
}

.icon-settings {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>') no-repeat center;
}

.icon-analytics {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-5h2v5zm4 0h-2v-3h2v3zm0-5h-2v-2h2v2zm4 5h-2V7h2v10z"/></svg>') no-repeat center;
}

.icon-calendar {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/></svg>') no-repeat center;
}

/* 内容区域 */
.main-content {
flex: 1;
margin-left: 250px;
padding: 30px;
}

.content-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}

.content-header h1 {
color: #333;
font-size: 1.8rem;
}

.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}

.card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card h3 {
color: #6e8efb;
margin-bottom: 15px;
}

.card p {
color: #666;
line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
}

.sidebar.active {
transform: translateX(0);
}

.main-content {
margin-left: 0;
}

.menu-toggle {
display: block;
}
}

/* 底部链接 */
.footer-link {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #6e8efb;
color: white;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
font-size: 0.8rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>

<div class="sidebar">
<div class="sidebar-header">
<h2>创意导航</h2>
</div>

<ul class="nav-menu">
<li class="nav-item active">
<a href="#" class="nav-link">
<div class="nav-icon icon-dashboard"></div>
<span>仪表盘</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<div class="nav-icon icon-profile"></div>
<span>个人资料</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<div class="nav-icon icon-messages"></div>
<span>消息中心</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<div class="nav-icon icon-analytics"></div>
<span>数据分析</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<div class="nav-icon icon-calendar"></div>
<span>日历</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<div class="nav-icon icon-settings"></div>
<span>设置</span>
</a>
</li>
</ul>
</div>


<div class="main-content">
<div class="content-header">
<h1>欢迎使用创意导航系统</h1>
</div>

<div class="card-container">
<div class="card">
<h3>简洁设计</h3>
<p>采用扁平化设计风格，简洁直观的界面让操作更加便捷，提升用户体验。</p>
</div>
<div class="card">
<h3>响应式布局</h3>
<p>完美适配各种屏幕尺寸，无论是在桌面还是移动设备上都能获得良好的浏览体验。</p>
</div>
<div class="card">
<h3>创意图标</h3>
<p>精心设计的SVG图标，清晰度高且加载速度快，为您的界面增添专业感。</p>
</div>
<div class="card">
<h3>平滑过渡</h3>
<p>所有交互元素都带有平滑的动画效果，让用户操作更加自然流畅。</p>
</div>
<div class="card">
<h3>色彩搭配</h3>
<p>精心挑选的配色方案，既美观又能有效传达信息层次。</p>
</div>
<div class="card">
<h3>易于定制</h3>
<p>模块化设计结构，方便您根据需求进行个性化定制和功能扩展。</p>
</div>
</div>
</div>


<script>
// 简单的交互效果
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
this.classList.add('active');
});
});

// 响应式菜单切换
function toggleSidebar() {
document.querySelector('.sidebar').classList.toggle('active');
}
</script>
</body>
</html>