Interaction
全屏抽屉菜单
带有错开链接揭示和平滑开闭过渡的全屏导航菜单。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a fullscreen drawer menu. A hamburger button triggers a dark overlay that slides or fades in, covering the viewport. Inside, display 4-5 large navigation links that stagger-reveal from the bottom with opacity and translateY. Include a close button. Use CSS transitions or keyframes, and JavaScript to toggle the open state. Use Tailwind CSS. Typography should be oversized and bold.
中文提示词
创建一个全屏抽屉菜单。汉堡按钮触发深色遮罩滑入或淡入,覆盖整个视口。内部显示 4-5 个大号导航链接,从底部错开显示(透明度和 translateY)。包含关闭按钮。使用 CSS transitions 或 keyframes,JavaScript 切换打开状态。使用 Tailwind CSS。字体应超大且粗体。

Overview
将菜单访问变成设计时刻的戏剧性导航模式。常见于机构和作品集网站。
Features
- 全屏遮罩
- 汉堡触发 + 关闭按钮
- 错开链接揭示
- 超大粗体链接
- 深色背景
- 平滑开闭过渡
Usage
适用于极简头部网站、作品集或希望导航显得有意图的品牌。
Customization
修改 prompt 以:
- 添加链接悬停下划线动画
- 底部包含社交链接
- 菜单中添加背景图片/视频
- 使用分屏菜单布局