メニューコントロールの概要

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

ASP.NET Menu コントロールによって、ASP.NET Web ページに静的および動的に表示するメニューを作成できます。

このトピックの内容は次のとおりです。

背景
コード例
クラスリファレンス

背景

Menu コントロールには、静的と動的の 2 つの表示モードがあります。静的表示とは、Menu コントロールが常に完全に展開されることを意味します。全体の構造が表示され、ユーザーはすべての部分をクリックできます。動的に表示されるメニューでは、指定した部分のみが静的に表示され、子メニュー項目はユーザーが親ノードの上にマウスポインタを置いた場合のみ表示されます。

Menu コントロールのコンテンツはコントロールで直接構成できますが、コントロールをデータソースにバインドしてコンテンツを指定することもできます。コードを記述せずに、ASP.NET Menu コントロールの外観、方向、およびコンテンツを制御できます。コントロールは、コントロールが公開するビジュアルプロパティに加えて、ASP.NET コントロールスキンとテーマもサポートします。スキンとテーマの詳細については、「ASP.NET のテーマとスキンの概要」を参照してください。

静的表示の動作

静的表示の動作は、Menu コントロールの StaticDisplayLevels プロパティを使用して制御できます。StaticDisplayLevels プロパティは、メニューのルートからどのレベルまで静的に表示するかを示します。たとえば、StaticDisplayLevels を 3 に設定すると、メニューは最初の 3 レベルまで静的に展開されて表示されます。静的な表示の最小レベルは 1 です。この値を 0 または負数に設定すると、コントロールが例外をスローします。

動的表示の動作

MaximumDynamicDisplayLevels プロパティは、静的表示レベルの後に表示される動的表示のメニューノードのレベル数を指定します。たとえば、メニューの静的レベルが 3 で、動的レベルが 2 の場合、メニューの最初の 3 レベルが静的に表示され、次の 2 レベルが動的に表示されます。

MaximumDynamicDisplayLevels を 0 に設定すると、動的に表示されるメニューノードはなくなります。MaximumDynamicDisplayLevels を負数に設定すると、例外がスローされます。

メニューコンテンツの定義

Menu コントロールのコンテンツは、2 つの方法で定義できます。宣言またはプログラムによって MenuItem オブジェクトを個別に追加するか、またはコントロールを XML データソースにデータバインディングします。

手動でのメニュー項目の追加

個々のメニュー項目をコントロールに追加するには、Items プロパティにそれらを指定します。Items プロパティは MenuItem オブジェクトのコレクションです。3 つの項目のそれぞれに 2 つの子項目がある Menu コントロールの宣言的マークアップの例を次に示します。

<asp:Menu ID="Menu1" runat="server" StaticDisplayLevels="3">
  <Items>
    <asp:MenuItem Text="File" Value="File">
      <asp:MenuItem Text="New" Value="New"></asp:MenuItem>
      <asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
    </asp:MenuItem>
    <asp:MenuItem Text="Edit" Value="Edit">
      <asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>
      <asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>
    </asp:MenuItem>
    <asp:MenuItem Text="View" Value="View">
      <asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>
      <asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>
    </asp:MenuItem>
  </Items>
</asp:Menu>

XML データソースへのデータバインディング

XML ファイルにバインドすると、デザイナを使用するのではなくファイルを編集することによって、メニューのコンテンツを制御できます。これによって、Menu コントロールを再参照したりコードを編集したりせずに、サイトのナビゲーション部分を更新できます。コンテンツが変化するサイトでは、コンテンツの編成に XML ファイルを使用し、Menu コントロールに渡して Web サイトのユーザーがアクセスできるようにします。

外観と動作

Menu コントロールの動作は、プロパティを使用して調整できます。さらに、メニューノードが表示されてから非表示になるまでの時間を含む動的表示の動作も制御できます。たとえば、Menu の方向を水平から垂直に変更するには、Orientation プロパティを次のように設定します。

[Visual Basic]

Menu.Orientation = Orientation.Vertical

[C#]

Menu.Orientation = Orientation.Vertical;

このプロパティを Orientation.Horizontal に設定すると、メニューの方向が水平に戻ります。

Menu コントロールの個々のプロパティを設定すると、サイズ、カラー、フォント、およびその他の外観の特性を指定できます。さらに、Menu コントロールにはスキンとテーマを適用できます。

スタイル

各メニューレベルは、スタイルのプロパティをサポートします。動的スタイルのプロパティが設定されていない場合は、静的スタイルのプロパティが使用されます。動的スタイルのプロパティが設定され、静的スタイルのプロパティが設定されていない場合は、静的スタイルのプロパティの既定のレンダリングが使用されます。Menu コントロールのスタイルの階層は次のとおりです。

Control
SubMenuStyles
MenuItemStyles
SelectedItemStyles
HoverMenuItemStyles

スタイルは動的メニューおよび静的メニューに次のロジックを使用してマージされます。

個々のスタイルは、適切なアクション型または項目型に適用されます。
すべてのスタイルは階層の先行するスタイルにマージされ、最後のスタイルによってオーバーライドされます。

メモ :

静的なメニューはマージされません。静的なスタイルが定義されていない場合は、動的なスタイルが適用されます。

メモ :
静的なメニューはマージされません。静的なスタイルが定義されていない場合は、動的なスタイルが適用されます。

動的な外観のタイミング

動的なメニューのでは、メニューの動的に表示されている部分を非表示にするまでの時間を指定できます。この値は、次のように DisappearAfter プロパティを調整してミリ秒単位で構成できます。

[Visual Basic]

Menu.DisappearAfter = 1000

[C#]

Menu.DisappearAfter = 1000;

既定値は、500 ミリ秒です。DisappearAfter の値を 0 に設定すると、Menu コントロールの外部でメニューが停止され、即座に非表示になります。この値を -1 に設定すると停止時間が無限になり、Menu コントロールの外部をクリックしたときのみ動的な部分が非表示になります。

メニューコントロールと UpdatePanel コントロールの使用

UpdatePanel コントロールは、ポストバックを使用してページ全体を更新する代わりに、ページの選択された領域を更新するために使用します。カスケードスタイルシート (CSS: Cascading Style Sheet) クラスへの参照を使用してスタイルを適用する必要があるという制限付きで、UpdatePanel コントロール内で Menu コントロールを使用できます。たとえば、property-subproperty 属性を使用して DynamicHoverStyle プロパティを設定する代わりに、property-CssClass 属性を使用してスタイルを設定します。同様に、DynamicHoverStyle テンプレートを使用してスタイルを設定する場合、テンプレートの CssClass 属性を使用します。

UpdatePanel コントロールの使用方法の詳細については、「UpdatePanel コントロールの概要」および「部分ページレンダリングの概要」を参照してください。

コード例

メニューコントロールでの CSS とスタイルの使用

メニューコントロールへのイメージの使用

チュートリアル : Web ページでのメニューの表示

チュートリアル : プログラムによる ASP.NET メニューの制御

ページのトップへ

クラスリファレンス

Menu コントロールに関連するクラスの一覧を次の表に示します。

メンバ	説明
Menu	コントロールのメインクラスです。
MenuEventArgs	Menu コントロールの MenuItemClick イベントと MenuItemDataBound イベントのデータを提供します。
MenuEventHandler	Menu コントロールの MenuItemClick イベントまたは MenuItemDataBound イベントを処理するメソッドを表します。
MenuItem	Menu コントロールに表示されるメニュー項目を表します。
MenuItemBinding	データ項目と、それが Menu コントロール内でバインドしているメニュー項目との関係を定義します。
MenuItemBindingCollection	MenuItemBinding オブジェクトのコレクションを表します。
MenuItemCollection	Menu コントロール内のメニュー項目のコレクションを表します。
MenuItemStyle	Menu コントロール内のメニュー項目のスタイルを表します。
MenuItemStyleCollection	Menu コントロール内の MenuItemStyle オブジェクトのコレクションを表します。

ページのトップへ

参照

概念

ASP.NET サイトナビゲーションの概要

参照

その他の技術情報

ナビゲーションツールボックスコントロール

メニュー コントロールの概要

背景