CSS DEVELOPMENT LAB · 12

Drawer / Offcanvas 侧滑抽屉

手机导航、产品筛选、购物车、详情信息都很适合从页面边缘滑入。 本实验用统一的 Drawer 结构完成右侧抽屉，并把布局、动画和滚动逻辑尽量交给 CSS。

CORE DEMO

一个 Drawer，三种常见用途

三个入口共用同一个抽屉组件。JavaScript 只负责把对应内容放入抽屉并切换状态， 不重复创建三套打开、关闭、遮罩和滚动逻辑。

CSS 负责 fixed、translateX、遮罩、宽度和内部滚动
JavaScript 负责 open / close 状态与内容切换
01

手机导航

适合主菜单、分类菜单、账户入口。

02

产品筛选

适合 WooCommerce 分类、属性、价格筛选。

03

Mini Cart

适合购物车摘要、询盘清单、收藏列表。

CORE CSS

抽屉动画本质只是位移

关闭时整个 Panel 在视口右侧，打开时移动回原位。 不需要 JavaScript 连续计算坐标，也不需要复杂动画库。 

.drawer {
  position: fixed;
  inset-block: 0;
  right: 0;
  transform: translateX(100%);
}

.drawer.is-open {
  transform: translateX(0);
}

COMMON USE CASES

适合从边缘出现的辅助内容

Navigation

手机导航、多级分类。

Filter

产品筛选、搜索条件。

Cart

Mini Cart、询盘清单。

Detail

产品详情、说明、附加信息。