纯HTML无法实现侧边抽屉效果，因其无交互、无状态、无样式控制能力；需HTML提供语义化结构、CSS控制定位动画、JS管理状态与可访问性。
HTML 本身做不出“抽屉”效果——它只是骨架，真正控制展开/收起、动画、遮罩层的是 CSS 和 JavaScript。
为什么纯 HTML 写不了侧边抽屉
HTML 是标记语言，没有状态、没有交互逻辑、没有样式控制能力。<details> 标签虽能折叠内容，但不支持侧边滑出、不兼容旧浏览器、无法自定义触发位置和动画，更不能实现常见的“点击头像弹出左侧抽屉”这类交互。
所谓“HTML 实现”，实际是：用 HTML 写结构 + 用 CSS 定义抽屉的定位/动画 + 用 JS 控制 open 状态（比如切换 class）。
最简可行的侧边抽屉结构（含语义与可访问性）
避免用 <div> 堆砌，优先用语义化标签，并预留 ARIA 属性便于屏幕阅读器识别：
立即学习“前端免费学习笔记（深入）”；
<aside id="profile-drawer" class="drawer drawer--closed" aria-hidden="true" aria-labelledby="profile-trigger">
<header class="drawer__header">
<h2 id="profile-trigger">我的信息</h2>
<button class="drawer__close" aria-label="关闭个人信息抽屉">×</button>
</header>
<div class="drawer__body">
<p>姓名：张三</p>
<p>邮箱：zhangsan@example.com</p>
</div>
</aside>
<p><button id="profile-trigger-btn" aria-expanded="false" aria-controls="profile-drawer">?</button>-
aria-hidden="true"初始隐藏，JS 打开时设为false；关闭时设回true -
aria-expanded同步按钮状态，辅助技术能感知当前是否展开 -
aria-controls明确关联触发器与抽屉容器 - 不要把抽屉写在
<body>外或<main>深层嵌套里——影响键盘焦点流和屏幕阅读器顺序
CSS 关键：用 transform + transition 实现高性能滑动
别用 left/right 动画，会触发重排；用 transform: translateX() 只触发合成，流畅且兼容性好：
.drawer {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100vh;
background: #fff;
box-shadow: -2px 0 8px rgba(0,0,0,0.1);
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.3s ease-out;
}
<p>.drawer--open {
transform: translateX(0);
}</p><p>/<em> 遮罩层（可选但推荐） </em>/
.drawer::before {
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 999;
opacity: 0;
transition: opacity 0.3s;
}</p><p>.drawer--open::before {
opacity: 1;
}- 遮罩层用伪元素
::before而非额外 DOM 元素，减少结构干扰 - 动画时间统一用
0.3s，太快用户反应不过来，太慢显得卡顿 - 移动端需加
touch-action: none防止手势冲突（尤其 iOS Safari）
JavaScript 控制逻辑：别漏掉焦点与 Esc 键处理
只切 class 不够，还得管理焦点、键盘关闭、点击遮罩关闭等真实场景需求：
const drawer = document.getElementById('profile-drawer');
const trigger = document.getElementById('profile-trigger-btn');
const closeBtn = document.querySelector('.drawer__close');
<p>function openDrawer() {
drawer.classList.remove('drawer--closed');
drawer.classList.add('drawer--open');
drawer.setAttribute('aria-hidden', 'false');
trigger.setAttribute('aria-expanded', 'true');
// 立即把焦点移到抽屉内首个可聚焦元素（如关闭按钮）
closeBtn.focus();
}</p><p>function closeDrawer() {
drawer.classList.remove('drawer--open');
drawer.classList.add('drawer--closed');
drawer.setAttribute('aria-hidden', 'true');
trigger.setAttribute('aria-expanded', 'false');
trigger.focus(); // 关闭后焦点回到触发按钮
}</p><p>trigger.addEventListener('click', openDrawer);
closeBtn.addEventListener('click', closeDrawer);
// 点击遮罩关闭（注意事件委托或监听 drawer 自身）
drawer.addEventListener('click', (e) => {
if (e.target === drawer) closeDrawer();
});
// Esc 键关闭
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && drawer.classList.contains('drawer--open')) {
closeDrawer();
}
});- 必须手动管理
focus()，否则键盘用户无法操作抽屉内控件 - 监听
drawer自身点击（而非::before）更可靠，因为伪元素无法被 JS 直接捕获事件 - 不要用
display: none切换——会导致焦点丢失且动画失效
抽屉最难的不是滑出来，而是让键盘用户、屏幕阅读器用户、触屏用户、缩放用户都能一致地打开、操作、关闭。所有“超详细教程”里最容易跳过的，就是这些非视觉路径的细节。
