Dropdown Menu
A panel of actions opens with grouping separators and a slide-in
Live preview (drag the parameters, watch it change)
Code
<div class="wrap" id="w"><button onclick="document.getElementById('w').classList.toggle('open')">文件操作 ▾</button>
<div class="menu"><div class="mi">重命名</div><div class="mi">复制一份</div><div class="sep"></div><div class="mi">导出为图片</div></div></div>
<style>
.wrap { position: relative; display: inline-block; }
.menu { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%) translateY(5px);
background: #fff; border: 1px solid #E3E0D8; border-radius: 12px; box-shadow: 0 14px 32px rgba(20,20,20,.12);
padding: 5px; width: 180px; opacity: 0; pointer-events: none; transition: all .2s cubic-bezier(.22,1,.36,1); }
.wrap.open .menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mi { padding: 8px 11px; border-radius: 8px; cursor: pointer; } .mi:hover { background: #F1EEE8; }
.sep { height: 1px; background: #E3E0D8; margin: 5px 4px; }
</style><!-- 展开状态用 group 或 JS 切类；静态结构示意： -->
<div class="relative inline-block"><button class="rounded-full bg-neutral-900 px-4 py-2 text-white">文件操作 ▾</button>
<div class="absolute left-1/2 top-[calc(100%+8px)] w-[180px] -translate-x-1/2 rounded-xl border border-[#E3E0D8] bg-white p-[5px] shadow-[0_14px_32px_rgba(20,20,20,.12)]"><div class="cursor-pointer rounded-lg px-[11px] py-2 hover:bg-[#F1EEE8]">重命名</div>…</div></div>export function Menu({ items }) {
const [open, setOpen] = React.useState(false);
return (<div style={{ position: "relative", display: "inline-block" }}>
<button onClick={() => setOpen(!open)}>文件操作 ▾</button>
{open && (<div style={{ position: "absolute", left: "50%", top: "calc(100% + 8px)", transform: "translateX(-50%)",
background: "#fff", border: "1px solid #E3E0D8", borderRadius: 12, boxShadow: "0 14px 32px rgba(20,20,20,.12)", padding: 5, width: 180 }}>
{items.map((t, i) => <div key={i} style={{ padding: "8px 11px", borderRadius: 8, cursor: "pointer" }}>{t}</div>)}
</div>)}</div>);
}
/* 生产环境建议用 Radix DropdownMenu 等无样式原语处理键盘与焦点 */Code snippets are MIT-licensed — copy and adapt freely.
How this effect works
它是怎么工作的（中文）
触发按钮 + 绝对定位的菜单面板，打开时从 opacity 0 + 下移 5px 过渡进来。菜单项 hover 给浅底色，组与组之间用 1px 分隔线。生产代码要处理：点外部关闭、Esc 关闭、方向键导航、焦点回收——手写很容易漏，建议用 Radix 这类无样式原语打底。
How it works (English)
A trigger button plus an absolutely-positioned panel that transitions from opacity 0 + 5px down. Items get a soft hover background; groups split with a 1px separator. Production menus must handle outside-click close, Esc, arrow-key navigation, and focus return — easy to miss by hand, so build on an unstyled primitive like Radix.
参考与来源 Sources
本条为「批次 1（重建）」成果（2026-11-10 用户决定：原 妞妞老师 素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。