ライブデモ Live Demo
メニューアイテムをクリックまたはホバーすると、ドロップダウンメニューがフェードインしながら下にスライドして表示されます。
Click or hover menu items to reveal dropdown menus that fade in and slide down smoothly.
AI向け説明 AI Description
`N-003` は `.active` クラスの追加/削除でメニューの表示/非表示を切り替えます。`opacity` と `transform: translateY()` を同時にアニメーションさせ、滑らかな展開を実現します。
`N-003` toggles menu visibility by adding/removing `.active` class. Animates both `opacity` and `transform: translateY()` simultaneously for smooth reveals.
調整可能パラメータ Adjustable Parameters
- --dropdown-duration — 展開/閉じるアニメーション時間 open/close animation duration
- transform direction — スライド方向の変更（上、左、右） change slide direction (up, left, right)
- trigger method — クリックまたはホバーで切り替え toggle on click or hover
- stagger delay — メニュー項目の順次表示 sequential reveal of menu items
実装 Implementation
HTML + CSS + JS
<div class="dropdown-item">
<button class="dropdown-trigger">Menu</button>
<div class="dropdown-menu">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
</div>
</div>
<style>
.dropdown-menu {
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.dropdown-item.active .dropdown-menu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
</style>
<script>
const trigger = document.querySelector(".dropdown-trigger");
const item = trigger.closest(".dropdown-item");
trigger.addEventListener("click", () => {
item.classList.toggle("active");
});
</script>React (JSX + CSS)
// react/N-003.jsx
import { useState } from "react";
import "./N-003.css";
export default function DropdownMenu({ label, items }) {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="dropdown-item">
<button className="dropdown-trigger" onClick={() => setIsOpen(!isOpen)}>
{label}
</button>
{isOpen && (
<div className="dropdown-menu">
{items.map((item) => (
<a key={item.id} href={item.url}>{item.label}</a>
))}
</div>
)}
</div>
);
}/* react/N-003.css */
.dropdown-menu {
position: absolute;
top: 100%;
background: #1c1c2a;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.3s ease, transform 0.3s ease;
}AIへの指示テンプレート AI Prompt Template
以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.
注意とバリエーション Notes & Variations
外側クリックで閉じる機能や、キーボード操作（ESCキー、矢印キー）のサポートを追加してください。モバイルではタッチイベントで適切に動作するよう調整が必要です。
Add click-outside-to-close and keyboard support (ESC, arrow keys). Adjust for touch events on mobile devices.