响应式导航菜单的经典实现，使用 translateX 实现平滑的侧边栏动画效果
点击左上角的按钮，体验侧边栏滑入滑出效果：
💡 提示：点击左上角的菜单按钮或遮罩层来切换侧边栏
演示说明：
创建侧边栏、切换按钮和遮罩层的基本结构：
<!-- 侧边栏 -->
<aside id="sidebar" class="sidebar">
<div class="sidebar-header">
<h3>导航菜单</h3>
</div>
<nav class="sidebar-nav">
<a href="#">首页</a>
<a href="#">产品</a>
<!-- 更多导航项 -->
</nav>
</aside>
<!-- 切换按钮 -->
<button id="toggle-btn" class="toggle-btn">☰</button>
<!-- 遮罩层 -->
<div id="overlay" class="overlay"></div>使用 translateX 将侧边栏初始位置设置在屏幕外，并添加过渡效果：
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 280px;
height: 100%;
background: white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
/* 关键：初始位置在屏幕外 */
transform: translateX(-100%);
/* 过渡效果 */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
}
/* 打开状态 */
.sidebar.open {
transform: translateX(0);
}
/* 遮罩层 */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 999;
}
.overlay.active {
opacity: 1;
visibility: visible;
}添加点击事件来切换侧边栏的打开/关闭状态：
const sidebar = document.getElementById('sidebar');
const toggleBtn = document.getElementById('toggle-btn');
const overlay = document.getElementById('overlay');
// 切换侧边栏
function toggleSidebar() {
sidebar.classList.toggle('open');
overlay.classList.toggle('active');
}
// 按钮点击事件
toggleBtn.addEventListener('click', toggleSidebar);
// 点击遮罩层关闭
overlay.addEventListener('click', toggleSidebar);使用媒体查询优化移动端体验：
@media (max-width: 768px) {
.sidebar {
width: 85%;
max-width: 320px;
}
.toggle-btn {
width: 45px;
height: 45px;
}
}