css制作侧边栏
侧边栏基础结构
使用HTML创建侧边栏容器，通常放在<body>内主内容之前：
<div class="sidebar">
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</div>
<div class="main-content">主内容区域</div>固定定位侧边栏
通过CSS固定侧边栏位置并设置高度：
.sidebar {
position: fixed;
width: 250px;
height: 100vh;
background: #2c3e50;
color: white;
padding: 20px 0;
}
.main-content {
margin-left: 250px;
padding: 20px;
}响应式侧边栏
添加媒体查询实现移动端隐藏：
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.sidebar.active {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
}悬浮动画效果
为菜单项添加交互效果：
.sidebar ul li {
padding: 15px 20px;
transition: background 0.3s;
}
.sidebar ul li:hover {
background: #34495e;
}
.sidebar a {
color: white;
text-decoration: none;
display: block;
}折叠式侧边栏
实现可折叠功能：
.sidebar.collapsed {
width: 60px;
}
.sidebar.collapsed .menu-text {
display: none;
}
.toggle-btn {
position: absolute;
right: -40px;
top: 10px;
cursor: pointer;
}暗色/亮色主题切换
通过CSS变量实现主题切换：
:root {
--sidebar-bg: #2c3e50;
--sidebar-text: #ecf0f1;
}
.light-theme {
--sidebar-bg: #f8f9fa;
--sidebar-text: #343a40;
}
.sidebar {
background: var(--sidebar-bg);
color: var(--sidebar-text);
}粘性滚动侧边栏
当内容较长时保持导航可见：
.sidebar {
position: sticky;
top: 0;
align-self: flex-start;
overflow-y: auto;
max-height: 100vh;
}每个实现方案可根据具体需求组合使用，通过调整CSS属性值可获得不同的视觉效果和交互体验。实际项目中建议结合JavaScript增强交互功能，如菜单折叠/展开、主题切换等动态操作。
