纯html无法实现侧边抽屉效果，因其无交互、无状态、无样式控制能力；需html提供语义化结构、css控制定位动画、js管理状态与可访问性。
HTML 本身做不出“抽屉”效果——它只是骨架，真正控制展开/收起、动画、遮罩层的是 CSS 和 JavaScript。
为什么纯 HTML 写不了侧边抽屉
HTML 是标记语言，没有状态、没有交互逻辑、没有样式控制能力。<details></details> 标签虽能折叠内容，但不支持侧边滑出、不兼容旧浏览器、无法自定义触发位置和动画，更不能实现常见的“点击头像弹出左侧抽屉”这类交互。
所谓“HTML 实现”，实际是：用 HTML 写结构 + 用 CSS 定义抽屉的定位/动画 + 用 JS 控制 open 状态（比如切换 class）。
最简可行的侧边抽屉结构（含语义与可访问性）
避免用 <div> 堆砌，优先用语义化标签，并预留 ARIA 属性便于屏幕阅读器识别：<pre class="brush:php;toolbar:false;"><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 class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
</aside><p><button id="profile-trigger-btn" aria-expanded="false" aria-controls="profile-drawer">?</button></p></pre>
<ul>
<li>
<code>aria-hidden="true" 初始隐藏，JS 打开时设为 false；关闭时设回 true
aria-expanded 同步按钮状态，辅助技术能感知当前是否展开aria-controls 明确关联触发器与抽屉容器<main></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;
}</p>
- 遮罩层用伪元素
::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();
}
});</p>
- 必须手动管理
focus()，否则键盘用户无法操作抽屉内控件 - 监听
drawer自身点击（而非::before）更可靠，因为伪元素无法被 JS 直接捕获事件 - 不要用
display: none切换——会导致焦点丢失且动画失效
抽屉最难的不是滑出来，而是让键盘用户、屏幕阅读器用户、触屏用户、缩放用户都能一致地打开、操作、关闭。所有“超详细教程”里最容易跳过的，就是这些非视觉路径的细节。
