侧边抽屉菜单是网页开发中常见的交互组件，用户点击触发按钮后侧边栏从屏幕边缘滑入，再次点击或者点击遮罩层时侧边栏滑出隐藏，这种效果在移动端网页和后台管理系统中应用非常广泛。实现这个效果不需要依赖第三方库，使用html5的基础标签配合CSS3的过渡属性和原生JavaScript就能完成。
一、基础页面结构搭建
首先需要搭建侧边抽屉菜单的基础html结构，包含触发按钮、侧边栏容器、遮罩层三个核心部分，主内容区域用来展示页面其他内容。结构代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侧边抽屉菜单实现</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 触发按钮 -->
<button class="menu-trigger">打开菜单</button>
<!-- 遮罩层 -->
<div class="mask"></div>
<!-- 侧边栏容器 -->
<div class="side-drawer">
<div class="drawer-header">菜单标题</div>
<ul class="drawer-list">
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
<li>菜单项4</li>
</ul>
</div>
<!-- 主内容区域 -->
<div class="main-content">
<p>这里是页面的主内容区域，侧边栏滑入时不会覆盖主内容，只会覆盖遮罩层区域。</p>
</div>
<script src="script.js"></script>
</body>
</html>
二、侧边栏样式设计
接下来编写CSS样式，核心是通过transform属性控制侧边栏的位置，配合transition属性实现滑入滑出的过渡效果，同时设置遮罩层的显示隐藏逻辑。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
}
/* 触发按钮样式 */
.menu-trigger {
position: fixed;
top: 20px;
left: 20px;
padding: 8px 16px;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
z-index: 100;
}
/* 遮罩层样式 */
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
display: none;
}
/* 侧边栏容器样式 */
.side-drawer {
position: fixed;
top: 0;
left: 0;
width: 280px;
height: 100%;
background-color: #fff;
z-index: 999;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
/* 侧边栏展开状态 */
.side-drawer.open {
transform: translateX(0);
}
/* 侧边栏头部样式 */
.drawer-header {
height: 60px;
line-height: 60px;
padding-left: 20px;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #eee;
}
/* 菜单列表样式 */
.drawer-list {
list-style: none;
}
.drawer-list li {
height: 50px;
line-height: 50px;
padding-left: 20px;
border-bottom: 1px solid #f5f5f5;
cursor: pointer;
}
.drawer-list li:hover {
background-color: #f5f5f5;
}
/* 主内容区域样式 */
.main-content {
padding: 80px 20px 20px;
line-height: 1.6;
}
三、交互逻辑实现
最后编写JavaScript代码，实现点击触发按钮打开侧边栏、点击遮罩层关闭侧边栏的逻辑，同时处理侧边栏展开时禁止页面滚动的问题。
// 获取DOM元素
const menuTrigger = document.querySelector('.menu-trigger');
const sideDrawer = document.querySelector('.side-drawer');
const mask = document.querySelector('.mask');
const body = document.body;
// 打开侧边栏的方法
function openDrawer() {
sideDrawer.classList.add('open');
mask.style.display = 'block';
// 禁止页面滚动
body.style.overflow = 'hidden';
}
// 关闭侧边栏的方法
function closeDrawer() {
sideDrawer.classList.remove('open');
mask.style.display = 'none';
// 恢复页面滚动
body.style.overflow = 'auto';
}
// 触发按钮点击事件
menuTrigger.addEventListener('click', openDrawer);
// 遮罩层点击事件
mask.addEventListener('click', closeDrawer);
// 侧边栏菜单项点击事件，点击后关闭侧边栏
const drawerItems = document.querySelectorAll('.drawer-list li');
drawerItems.forEach(item => {
item.addEventListener('click', closeDrawer);
});
四、常见问题与优化
1. 适配不同屏幕尺寸
如果需要在移动端使用，可以调整侧边栏的宽度，比如在小屏幕设备上设置侧边栏宽度为80%，可以通过媒体查询实现：
@media screen and (max-width: 768px) {
.side-drawer {
width: 80%;
}
}
2. 过渡效果优化
如果想要更自然的滑入效果，可以调整transition的贝塞尔曲线，比如使用cubic-bezier(0.4, 0, 0.2, 1)替代默认的ease-in-out，动画会更流畅。
3. 避免点击穿透
如果侧边栏上有表单元素，点击时可能会触发遮罩层的点击事件，可以在侧边栏容器上添加点击事件阻止冒泡：
sideDrawer.addEventListener('click', function(e) {
e.stopPropagation();
});
以上就是使用html5实现侧边抽屉菜单滑入滑出效果的完整方法，开发者可以根据实际需求调整样式和交互逻辑，适配不同的业务场景。
html5侧边抽屉菜单CSS3_transitionJavaScript滑入滑出效果修改时间：2026-07-24 06:54:35