NAVIGATION
全屏遮罩菜单Fullscreen Overlay Menu
点汉堡图标后，一层接近全黑的半透明幕布盖住整屏，导航项用超大字号逐个列出。
效果预览
适合用在哪
品牌站、作品集、创意机构；导航项少但想做出仪式感。
容易踩的坑
- 菜单打开后 body 未锁定滚动，背后页面仍在滑动，关闭时位置已经跑偏。
- 焦点没有移入菜单也未锁定，Tab 会跳到被遮住的页面链接上。
- 6 项以上 stagger 每项 60ms 叠加超过 400ms，用户想快速点击时菜单还没出完。
设计提示词 · Prompt
全屏遮罩菜单（Fullscreen Overlay Menu）：点击汉堡图标后，一层 rgba(12,12,18,.94) + backdrop-filter:blur(16px) 的深色幕布覆盖全屏，右上角再补一团紫色径向光晕（radial-gradient 50%,rgba(124,58,237,.5)）。导航项用 40-64px 的超大粗体字逐个竖排（字距 -0.03em），每项前带一个等宽的两位序号（12px、单空格字体、40% 白）。当前项用靛蓝→品红的渐变文字。菜单项入场用 60ms 递增的 stagger 淡入 + 上移 20px。底部一行小字放社交链接。关闭时整体 240ms 反向退场。
Fullscreen Overlay Menu: after clicking the hamburger icon, a dark curtain of rgba(12,12,18,.94) + backdrop-filter:blur(16px) covers the full screen, with a purple radial glow added in the top-right corner (radial-gradient 50%, rgba(124,58,237,.5)). Nav items are stacked vertically in 40-64px oversized bold type (letter-spacing -0.03em), each prefixed with a two-digit monospaced index (12px, monospace font, 40% white). The current item uses indigo→magenta gradient text. Items enter with a stagger fade-in incrementing by 60ms + a 20px upward move. A line of small text at the bottom holds social links. On close, everything exits in reverse over 240ms.
常见搭配
同一页面里经常和「全屏遮罩菜单」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-overlay">
<div class="d-overlay__top">
<span>◆ Nova</span>
<span style="font-size:15px;opacity:.8">✕</span>
</div>
<div class="d-overlay__nav">
<div class="d-overlay__item is-on"><small>01</small>产品</div>
<div class="d-overlay__item"><small>02</small>案例</div>
<div class="d-overlay__item"><small>03</small>定价</div>
<div class="d-overlay__item"><small>04</small>关于</div>
</div>
<div class="d-overlay__foot"><span>Twitter</span><span>·</span><span>GitHub</span><span>·</span><span>hello@nova.dev</span></div>
</div>