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