Fullscreen Drawer Menu — mcpskills.net

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 A dramatic navigation pattern that turns menu access into a designed moment. Common on agency and portfolio sites. ## Features - Full-screen overlay - Hamburger trigger + close button - Staggered link reveal - Oversized bold links - Dark background - Smooth open/close transitions ## Usage Use for minimal header sites, portfolios, or brands that want navigation to feel intentional. ## Customization Modify the prompt to: - Add link hover underline animation - Include social links at the bottom - Add background image/video in menu - Use split-screen menu layout