- 伸缩功能：点击菜单按钮可以平滑地展开或收起侧边栏。
- 响应式设计：在移动设备上，侧边栏默认隐藏，通过一个“汉堡”菜单按钮来触发显示。
- 内容自适应：当侧边栏收起时，主内容区域会自动调整宽度和边距,不会被遮挡。
- 平滑过渡：使用 CSS
transition实现所有动画效果,体验流畅。 - 状态保持：使用
localStorage记住用户的侧边栏偏好（展开或收起）,刷新页面后状态不变。 - 现代美观：使用 CSS 变量方便主题定制,并包含一些示例菜单项。
最终效果预览
第一步：HTML 结构
我们将使用语义化的 HTML5 标签来构建页面结构，主要包括一个侧边栏 (<aside>) 和一个主内容区域 (<main>)。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">可伸缩侧边栏模板</title>
<!-- 引入字体图标库，这里使用 Font Awesome 作为示例 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<!-- 侧边栏 -->
<aside id="sidebar">
<div class="sidebar-header">
<h2 class="logo">
<!-- Logo 可以是文字或图片 -->
<span class="logo-text">MyLogo</span>
</h2>
<button class="toggle-btn" id="toggle-btn">
<i class="fas fa-bars"></i>
</button>
</div>
<ul class="sidebar-links">
<li>
<a href="#" class="active">
<i class="fas fa-home"></i>
<span class="menu-text">首页</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-pie"></i>
<span class="menu-text">数据分析</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<span class="menu-text">用户管理</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<span class="menu-text">系统设置</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question-circle"></i>
<span class="menu-text">帮助中心</span>
</a>
</li>
</ul>
<div class="sidebar-footer">
<a href="#">
<i class="fas fa-sign-out-alt"></i>
<span class="menu-text">退出登录</span>
</a>
</div>
</aside>
<!-- 主内容区域 -->
<main class="content">
<header class="content-header">
<h1>主内容区域</h1>
<p>侧边栏可以自由伸缩，主内容会自适应。</p>
</header>
<section class="content-body">
<h2>内容区块</h2>
<p>这里放置你的主要内容，当你点击左上角的菜单按钮时，侧边栏会平滑地展开或收起，同时本区域的布局也会相应调整。</p>
<p>尝试调整浏览器窗口大小，查看响应式效果。</p>
<!-- 为了演示，这里放一些占位内容 -->
<div style="margin-top: 20px; padding: 20px; background-color: #f0f0f0; border-radius: 8px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>
</main>
</div>
<script src="script.js"></script>
</body>
</html>
第二步：CSS 样式
这是实现伸缩效果和响应式布局的核心，我们将使用 CSS 变量来定义颜色和尺寸,方便后续主题定制。
/* style.css */
:root {
--sidebar-width: 250px;
--sidebar-collapsed-width: 70px;
--primary-color: #3498db;
--secondary-color: #2c3e50;
--text-color: #333;
--light-bg: #ecf0f1;
--hover-bg: #d4e6f1;
--transition-speed: 0.3s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-color);
background-color: #f4f6f9;
}
.wrapper {
display: flex;
min-height: 100vh;
}
/* --- 侧边栏样式 --- */
#sidebar {
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width);
height: 100vh;
background-color: var(--secondary-color);
color: white;
transition: width var(--transition-speed) ease-in-out, padding var(--transition-speed) ease-in-out;
z-index: 1000;
overflow: hidden; /* 防止内容溢出 */
}
#sidebar.collapsed {
width: var(--sidebar-collapsed-width);
}
.sidebar-header {
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo {
display: flex;
align-items: center;
font-size: 1.5rem;
font-weight: bold;
}
.logo-text {
transition: opacity var(--transition-speed) ease;
}
#sidebar.collapsed .logo-text {
opacity: 0;
visibility: hidden;
}
.toggle-btn {
background: none;
border: none;
color: white;
font-size: 1.2rem;
cursor: pointer;
padding: 5px;
border-radius: 4px;
transition: background-color var(--transition-speed);
}
.toggle-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.sidebar-links {
list-style: none;
padding: 20px 0;
}
.sidebar-links li a {
display: flex;
align-items: center;
padding: 15px 20px;
color: white;
text-decoration: none;
transition: background-color var(--transition-speed);
position: relative;
}
.sidebar-links li a:hover {
background-color: var(--hover-bg);
}
.sidebar-links li a.active {
background-color: var(--primary-color);
}
.sidebar-links li a i {
font-size: 1.2rem;
width: 25px;
text-align: center;
margin-right: 15px;
}
.menu-text {
transition: opacity var(--transition-speed) ease;
}
#sidebar.collapsed .menu-text {
opacity: 0;
visibility: hidden;
}
.sidebar-footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* --- 主内容区域样式 --- */
.content {
flex: 1;
margin-left: var(--sidebar-width);
padding: 20px;
transition: margin-left var(--transition-speed) ease-in-out;
}
#sidebar.collapsed + .content {
margin-left: var(--sidebar-collapsed-width);
}
.content-header {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
.content-body {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
#sidebar {
width: var(--sidebar-collapsed-width); /* 移动端默认收起 */
}
#sidebar:not(.collapsed) {
width: var(--sidebar-width);
}
.content {
margin-left: var(--sidebar-collapsed-width); /* 移动端默认不占用空间 */
}
#sidebar:not(.collapsed) + .content {
margin-left: var(--sidebar-width); /* 展开时才占用空间 */
}
/* 移动端遮罩层 */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
body.show-overlay .overlay {
display: block;
}
}
第三步：JavaScript 交互
JS 负责处理点击事件、切换 collapsed 类以及保存用户偏好。
// script.js
document.addEventListener('DOMContentLoaded', () => {
const sidebar = document.getElementById('sidebar');
const toggleBtn = document.getElementById('toggle-btn');
const overlay = document.createElement('div'); // 创建遮罩层元素
overlay.className = 'overlay';
// 从 localStorage 读取用户偏好
const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
if (isCollapsed) {
sidebar.classList.add('collapsed');
}
// 切换侧边栏
function toggleSidebar() {
sidebar.classList.toggle('collapsed');
const isCurrentlyCollapsed = sidebar.classList.contains('collapsed');
localStorage.setItem('sidebarCollapsed', isCurrentlyCollapsed);
// 移动端显示/隐藏遮罩层
if (window.innerWidth <= 768) {
document.body.classList.toggle('show-overlay', !isCurrentlyCollapsed);
}
}
toggleBtn.addEventListener('click', toggleSidebar);
// 点击遮罩层也可以关闭侧边栏（移动端）
overlay.addEventListener('click', () => {
sidebar.classList.add('collapsed');
document.body.classList.remove('show-overlay');
localStorage.setItem('sidebarCollapsed', 'true');
});
// 将遮罩层添加到 body
document.body.appendChild(overlay);
// 窗口大小改变时，重置遮罩层状态
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
document.body.classList.remove('show-overlay');
}
});
});
如何使用和定制
- 保存文件：将以上三段代码分别保存为
index.html、style.css和script.js,并放在同一个文件夹下。 - 在浏览器中打开：用浏览器打开
index.html文件,你就可以看到效果了。 - 定制颜色：打开
style.css，修改root选择器下的 CSS 变量即可。--primary-color: 主要高亮颜色（如激活菜单项）。--secondary-color: 侧边栏背景色。--text-color: 文字颜色。--sidebar-width: 侧边栏展开时的宽度。--sidebar-collapsed-width: 侧边栏收起时的宽度。
- 添加菜单项：在
index.html的<ul class="sidebar-links">中按照现有格式添加<li>元素即可。 - 修改 Logo：修改
<h2 class="logo">中的<span class="logo-text">或替换为一个<img>
这个模板为你提供了一个坚实的基础,你可以根据项目的具体需求进行扩展和修改。
（图片来源网络，侵删）
