syncfusion-aspnetcore-menu

メニューコンポーネントの実装

階層化された項目、アイコン、アニメーション、イベント処理を備えたナビゲーションメニューシステムを構築する必要がある場合、このスキルでは Syncfusion Core Menu コンポーネントの使用方法を詳しく説明します。

このスキルを使用する場面

次のような場合に、このスキルを使用します。

• 入れ子になった項目を含む階層型ナビゲーションメニューを表示する
• 配列または自己参照構造からメニューデータをバインドする
• アイコン、アニメーション、スタイルを使ってメニューの外観をカスタマイズする
• ユーザー操作（クリック、選択、開閉）を処理する
• アクセシビリティ機能（RTL、ハンバーガーモード、スクロール）をサポートする
• 項目を動的に管理するレスポンシブなメニューレイアウトを作成する

コンポーネントの概要

Menu は、アプリケーションやサイトのナビゲーションヘッダーとして機能するグラフィカルユーザーインターフェイスコンポーネントです。次の機能をサポートします。

• データバインディング：階層型または自己参照型のデータ構造
• カスタマイズ：アイコン、テンプレート、アニメーション、CSS によるスタイリング
• ユーザー操作：開く、閉じる、選択、項目のレンダリングに関するイベント
• アクセシビリティ：RTL のサポート、永続化、キーボードナビゲーション
• 高度な機能：ハンバーガーモード、スクロール、ホバー効果

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• 最初のメニューの作成
• 基本的な項目構造（階層型）
• CSS のインポートとテーマ
• TagHelper 構文の基礎

メニュー項目とデータバインディング

📄 参照： references/menu-items-and-data-binding.md

• 項目の構造（MenuItemModel）
• インライン配列を使った Items プロパティ
• 階層型データバインディング
• 自己参照型データ構造
• カスタムデータ用の FieldSettings マッピング

カスタマイズとスタイリング

📄 参照： references/customization-and-styling.md

• カスタムスタイリング用の cssClass プロパティ
• テーマのカスタマイズ
• 高度なレイアウトに対応するテンプレートのサポート
• メニュー項目のスタイリングパターン
• アニメーションの設定

アイコン、サブメニュー、階層構造

📄 参照： references/icons-submenus-and-hierarchy.md

• iconCss を使ったアイコンの追加
• 入れ子になった項目を使ったサブメニューの作成
• 複数レベルの階層構造
• 区切り項目
• 複雑なメニュー構造の整理

イベントとユーザー操作

📄 参照： references/events-and-user-interactions.md

• イベント名：beforeOpen、beforeClose、onOpen、onClose、select、beforeItemRender、created
• イベントハンドラーのパターン
• BeforeOpenCloseMenuEventArgs のプロパティ
• OpenCloseMenuEventArgs のプロパティ
• MenuEventArgs のプロパティ
• イベント内の条件分岐

メソッドとパブリック API

📄 参照： references/methods-and-public-api.md

• ライフサイクルメソッド（appendTo、refresh、destroy、dataBind）
• 項目の管理（enableItems、hideItems、showItems、setItem、getItemIndex）
• 項目の挿入と削除（insertAfter、insertBefore、removeItems）
• ハンバーガーモードの制御（open、close）
• イベント処理（addEventListener、removeEventListener）
• モジュールのインジェクション（Inject）
• 実用的な実装パターン
• メソッド使用時のベストプラクティス

配置とアクセシビリティ

📄 参照： references/orientation-and-accessibility.md

• 水平方向と垂直方向の配置
• RTL（enableRtl）のサポート
• レスポンシブデザイン向けのハンバーガーモード
• 永続化（enablePersistence）
• 大規模なメニュー向けのスクロール（enableScrolling）
• HTML のサニタイズ（enableHtmlSanitizer）

API リファレンス

📄 参照： references/api-reference.md

• すべてのプロパティのリファレンス
• イベント宣言
• MenuAnimationSettingsModel のオプション
• FieldSettingsModel の設定
• MenuItem のプロパティ
• 列挙値（Orientation、MenuEffect）

クイックスタートの例

3 つの垂直方向の項目を含む基本的なメニューを作成します。

@{
    List<object> menuItems = new List<object>();
    menuItems.Add(new { text = "File" });
    menuItems.Add(new { text = "Edit" });
    menuItems.Add(new { text = "View" });
}

<ejs-menu id="menu" items="menuItems"></ejs-menu>

サブメニューを含める場合：

@{
    var menuItems = new List<object> {
        new {
            text = "File",
            items = new List<object> {
                new { text = "New" },
                new { text = "Open" },
                new { text = "Save" }
            }
        },
        new {
            text = "Edit",
            items = new List<object> {
                new { text = "Cut" },
                new { text = "Copy" },
                new { text = "Paste" }
            }
        }
    };
}

<ejs-menu id="menu" items="menuItems"></ejs-menu>

よくあるパターン

パターン 1：フィールドマッピングによるデータバインディング

カスタムデータ構造を使用する場合は、fields プロパティを使ってフィールドをマッピングします。

<ejs-menu id="menu" items="ViewBag.menuData" fields="ViewBag.menuFields"></ejs-menu>

コントローラー：

var menuFields = new { text = "name", children = "submenu", iconCss = "icon" };

パターン 2：イベント処理

イベントハンドラーを追加して、ユーザー操作に応答します。

<ejs-menu id="menu" 
    items="menuItems"
    select="onMenuSelect"
    beforeOpen="onBeforeOpen">
</ejs-menu>

パターン 3：アイコン付きの水平メニュー

アイコンを使用できる水平メニューを作成します。

<ejs-menu id="menu" 
    items="menuItems"
    orientation="Horizontal"
    enableRtl="false">
</ejs-menu>

パターン 4：RTL とアクセシビリティ

さまざまなロケールに対応するアクセシビリティ機能を有効にします。

<ejs-menu id="menu" 
    items="menuItems" 
    locale="ar-AE"
    enableRtl="true"
    enablePersistence="true">
</ejs-menu>

主なプロパティの概要

プロパティ	型	目的
items	MenuItemModel[]	メニュー項目の配列
orientation	Orientation	水平または垂直（デフォルト：Vertical）
fields	FieldSettingsModel	データバインディングのフィールドマッピング
cssClass	string	スタイル設定用のカスタム CSS クラス
enableRtl	boolean	テキストの右から左への方向
enablePersistence	boolean	ページの再読み込み後も状態を保持
enableScrolling	boolean	オーバーフローしたコンテンツのスクロールを有効化
hamburgerMode	boolean	モバイル向けのレスポンシブメニューモード
animationSettings	MenuAnimationSettingsModel	サブメニューのアニメーション設定
hoverDelay	number	ホバー時にサブメニューが開くまでのミリ秒数
template	string | Function	カスタム項目テンプレート

一般的なユースケース

ナビゲーションヘッダー：アイコンとスタイルを備えた複数階層のサイトナビゲーションメニューを作成します。

アプリケーションのメニューバー：キーボード操作に対応した従来型の File／Edit／View メニューバーを実装します。

モバイルナビゲーション：ハンバーガーモードを使用して、モバイル向けのレスポンシブナビゲーションを実現します。

コンテキストメニュー：ユーザーの操作やデータに応じて動的なメニューを表示します。

ローカライズされたメニュー：複数の言語と RTL レイアウトに対応します。

---

次のステップ： 必要に応じて、上記からリファレンスファイルを選択してください。Menu コンポーネントを初めて使用する場合は、getting-started.md から始めてください。