次の方法で共有

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

  • [アーティクル]

更新 : 2007 年 11 月

マウス ポインタをメニュー項目に移動したときに、追加の子メニュー項目を表示するイメージを使用することができます。また、イメージを使用して静的なメニュー項目と動的なメニュー項目を区別したり、メニュー全体やメニュー項目の 1 レベルの背景として指定したりすることができます。

カスケード スタイル シート (CSS: Cascading Style Sheet) と Menu コントロールのプロパティを使用して、使用するイメージとイメージの表示方法を指定できます。

既定のポップ アウト イメージの使用

2 つのプロパティのいずれかまたは両方を使用して、Menu コントロールを最初に描画するときに、表示しない子メニュー項目を示すイメージを指定できます。既定のイメージを使用して静的メニュー項目に子項目があることを示すには、StaticEnableDefaultPopOutImage プロパティを true に設定します。既定のイメージを使用して動的メニュー項目に子項目があることを示すには、DynamicEnableDefaultPopOutImage プロパティを true に設定します。これらのプロパティのいずれかまたは両方の値を false に設定すると、子項目が存在する各メニュー項目に既定の黒の矢印イメージは表示されません。

次の例では、両方の値を true に設定しているため、子項目が存在する静的メニュー項目と動的メニュー項目は既定の黒の矢印イメージが表示されます。

    <asp:Menu ID="Menu1" runat="server" 
        StaticEnableDefaultPopOutImage="true"
        DynamicEnableDefaultPopOutImage="true">

カスタム インジケータ アイコンの指定

インジケータ アイコンとして作成したカスタム イメージを使用するには、値を StaticPopOutImageUrl プロパティと DynamicPopOutImageUrl プロパティに割り当てます。これらの各プロパティには、使用するイメージを示すファイルの場所と名前を指定します。StaticPopOutImageUrl プロパティは静的メニュー項目に使用するイメージを管理します。また、DynamicPopOutImageUrl プロパティは動的メニュー項目に使用するイメージを管理します。

次の例では、静的および動的インジケータ アイコンを Images ディレクトリにある Greenarrow.gif イメージに設定しています。

    <asp:Menu ID="Menu1" Runat="server" 
        StaticPopOutImageUrl="~/images/greenarrow.gif"
        DynamicPopOutImageUrl="~/images/greenarrow.gif">

区切り記号イメージの指定

同じレベルにあるメニュー項目は、区切り記号イメージで区切ることができます。あるレベルの上および下のメニュー項目、または静的または動的メニューのすべてのレベルに表示される区切り記号イメージを指定できます。区切り記号イメージを指定するために 4 つのプロパティが使用されます。静的メニュー項目の上部と下部の区切り記号のプロパティ 2 つと、動的メニュー項目の上部と下部の区切り記号のプロパティ 2 つです。

次の例では、各静的項目の下に Greenseparator.gif イメージを表示するように指定します。

    <asp:Menu ID="Menu2" Runat="server" 
        StaticBottomSeparatorImageUrl="~/greenseparator.gif">

スクロール イメージの指定

多数のメニュー項目を指定すると、動的メニュー項目の表示に使用されるポップアップ ウィンドウにすべてのメニュー項目を表示できなくなることがあります。Menu コントロールは、自動的にスクロール バーを作成します。これによって、ユーザーはメニュー項目のリストをスクロール表示できます。また、ScrollDownImageUrl プロパティと ScrollUpImageUrl プロパティを使用し、スクロールバーの上矢印と下矢印のアイコンにカスタムの矢印や他のイメージを割り当てることができます。

これらの 2 つのプロパティを使用して、スクロールバーの矢印にカスタム イメージを指定する方法の例を次に示します。

    <asp:Menu ID="Menu1" Runat="server" 
        ScrollUpImageUrl="~/images/greenuparrow.gif"
        ScrollDownImageUrl="~/images/greenuparrow.gif"

CSS でのイメージ サイズの指定

イメージの操作方法は、Menu コントロールを使用した表示方法に大きな影響があります。たとえば、ページを初めて表示して、Menu に使用するイメージがまだブラウザにキャッシュされていない場合、イメージ サイズが決定されるまで、イメージはちらついたり "ジャンプ" して見えます。カスケード スタイル シート (CSS) に Menu コントロールに使用するイメージのサイズを指定することで、このような症状を回避できます。

メニュー項目があるイメージを使用する場合、まず HTML マークアップにイメージを使用して、メニュー項目の WebControl.CssClass プロパティにクラス名を割り当てます。次に CSS にイメージ サイズを指定します。次の例では、"menuitem" というクラス名を StaticMenuItemStyle プロパティと DynamicMenuItemStyle プロパティに割り当てます。

<StaticMenuItemStyle CssClass="menuitem" />
<DynamicMenuItemStyle CssClass="menuitem" />

メニューを含むページが参照する CSS ファイルで、メニュー項目の CSS クラスを参照し、イメージ サイズを設定します。

次の例では、"menuitem" CSS クラスを参照し、メニュー項目に子項目があるときに 40 ピクセル× 40 ピクセルのイメージを使用して指定します。

.menuitem {} /*Style code for each menu item goes here. */
.menuitem img 
{
  width: 40px;
  height: 40px;
}

参照

処理手順

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

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

概念

ASP.NET Web サーバー コントロールと CSS スタイル

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

参照

Menu