N-003 Navigation medium

How to create a dropdown menu ドロップダウンメニューの作り方

Dropdown menus that expand on click or hover with adjustable animation speed and direction. クリックまたはホバーで展開するドロップダウンメニュー。アニメーション速度と方向を調整できます。

dropdown menu navigation hover

ライブデモ Live Demo

Product 1 Product 2 Product 3
Service 1 Service 2
0.3s

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Dropdown menus that expand on click or hover with adjustable animation speed and direction.

クリックまたはホバーで展開するドロップダウンメニュー。アニメーション速度と方向を調整できます。

どこで使うかWhere to use

website header, dashboard sidebar, mobile menu, admin panel

ヘッダーナビゲーション、コンテキストメニュー、アクションメニュー、フィルタードロップダウン

特徴Key features

Accessible dropdown menu that opens on click or hover with CSS animation. Supports nested sub-menus. Keyboard navigable (arrow keys, Escape to close). Click-outside detection closes the menu. Touch-friendly.

クリックまたはホバーでCSSアニメーションで開くアクセシブルドロップダウンメニュー。ネストされたサブメニューをサポート。キーボードナビゲーション対応（矢印キー、Escapeで閉じる）。クリック外検知でメニューを閉じる。タッチフレンドリー。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--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 Code 

// 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;
}
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} onClick={() => setIsOpen(false)}>
              {item.label}
            </a>
          ))}
        </div>
      )}
    </div>
  );
}
/* Dropdown navigation styles are now in global.css */

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

The trigger button toggles aria-expanded. The dropdown panel uses position: absolute with top: 100% and opacity/transform animation for the open/close transition. A global click listener detects outside clicks to close the menu. Arrow key events move focus between menu items.

トリガーボタンがaria-expandedをトグル。ドロップダウンパネルはposition:absolute + top:100%を使用し、オープン/クローズトランジションにopacity/transformアニメーションを使用。グローバルクリックリスナーが外側クリックを検知してメニューを閉じる。矢印キーイベントがメニューアイテム間のフォーカスを移動。

カスタマイズ方法Customization

Add a max-height with overflow-y: scroll for long dropdown lists. Use a right-aligned position (right: 0) for dropdowns at the edge of the screen. Add icons to menu items for visual grouping.

長いドロップダウンリストにmax-height + overflow-y:scrollを追加。画面端のドロップダウンに右寄せ位置（right:0）を使用。視覚的グループ化のためにメニューアイテムにアイコンを追加。

注意点Caveats

Use role="menu" and role="menuitem" for action menus, or role="listbox" and role="option" for selection menus — they have different keyboard interaction patterns. Never nest interactive elements (links, buttons) inside a role="menu" item.

アクションメニューにはrole="menu"とrole="menuitem"を使用し、選択メニューにはrole="listbox"とrole="option"を使用してください — キーボードインタラクションパターンが異なります。role="menu"アイテム内にインタラクティブ要素（リンク、ボタン）をネストしないでください。

よくある質問 Frequently Asked Questions

How to customize the dropdown menu? Dropdown Menuをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the dropdown menu in React? ReactでDropdown Menuを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of dropdown menu? Dropdown Menuのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.