UI Components
大型菜单下拉
具有网格分类、特色卡片和柔和进入动画的宽敞大型菜单。
作者:mcpskills
框架
reacttailwind
UI 库
navigation
难度advanced
英文提示词
Design a mega menu dropdown for a high-end product header. The top navbar has a logo, standard links, and one 'Products' link that opens the mega menu. The dropdown is a wide rounded-2xl white panel with a soft shadow and a thin gray border. Inside, use a 12-column grid: left 8 columns show 4 category columns (each with a small SVG icon, bold category name, and 3-4 subtle link items), right 4 columns show 2 featured cards with gradient placeholders, titles, and short descriptions. Add a small footer row at the bottom with 'View all products' link and a subtle arrow SVG. The menu should have a fade-in + slight translateY entrance animation. Use no emojis, only SVG icons. Typography should be crisp and hierarchy clear.
中文提示词
为高端产品页头设计一个 mega menu 下拉菜单。顶部导航栏包含 logo、标准链接和一个可打开 mega menu 的 'Products' 链接。下拉菜单是一个宽大的 rounded-2xl 白色面板,带有柔和阴影和细灰色边框。内部使用 12 列网格:左侧 8 列展示 4 个分类列(每个包含小 SVG 图标、粗体分类名和 3-4 个细微链接项),右侧 4 列展示 2 个特色卡片(带渐变占位图、标题和简短描述)。底部放置一行小页脚,包含 'View all products' 链接和细微的箭头 SVG。菜单应具有淡入 + 轻微 translateY 的进入动画。不使用 emoji,仅使用 SVG 图标。排版应锐利、层级清晰。
