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

更新 : 2007 年 11 月

Menu コントロールの外観のほぼすべての要素は、Menu コントロールのプロパティまたはカスケード スタイル シート (CSS) を使用して管理できます。どのプロパティがどの描画要素を制御するかを理解することで、メニューの外観を調整できます。このトピックでは、Menu コントロールによって表示されるスタイルの種類を紹介し、Menu コントロールを使用してスタイルを設定する場合のベスト プラクティスを提案します。

多様なスタイルの属性をマークアップに直接設定するか、スタイル シートに指定できます。CssClass プロパティは、Menu コントロールの外観の一部要素を制御するメニュー スタイルに CSS クラスを割り当てるときに使用できます。後からスタイル シートで参照できるいくつかの Menu プロパティについて、CssClass プロパティを指定する方法の例を次に示します。

<asp:menu id="NavigationMenu2"
  staticdisplaylevels="3"
  orientation="Vertical"
  target="_blank"  
  runat="server"
  CssClass="menu2">
  
<levelsubmenustyles>
  <asp:submenustyle CssClass="level1" />
  <asp:submenustyle CssClass="level2"/> 
  <asp:SubMenuStyle CssClass="level3" />
  </levelsubmenustyles>  
...

これは、マークアップにインライン スタイルを指定する場合、またはスタイル シートで CssClass プロパティを使用してスタイルを指定する場合のどちらでもベスト プラクティスです。予期しない動作が発生する可能性があるため、インライン スタイルとスタイル シートの両方を使用することは推奨されません。サーバー コントロールで CSS を使用する場合の全般的な説明については、「ASP.NET Web サーバー コントロールと CSS スタイル」を参照してください。

メニューの動作とスタイル

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

StaticDisplayLevels プロパティは、静的に表示されるメニュー項目のレベル数を決定します。4 レベルのメニュー項目があり、StaticDisplayLevels プロパティが 3 に設定されている場合、最初の 3 レベルが静的に表示され、最後のレベルのメニュー項目は動的に表示されます。

メニューの静的な部分の外観を制御するには、名前に "Static" という単語を含むスタイル プロパティを使用します。

• StaticMenuStyle

• StaticMenuItemStyle

• StaticSelectedStyle

• StaticHoverStyle

メニューの動的な部分の外観を制御するには、名前に "Dynamic" という単語を含むスタイル プロパティを使用します。

• DynamicMenuStyle

• DynamicMenuItemStyle

• DynamicSelectedStyle

• DynamicHoverStyle

StaticMenuStyle プロパティと DynamicMenuStyle プロパティは、それぞれ全体の静的メニュー項目と全体の動的メニュー項目に影響を与えます。たとえば、DynamicMenuStyle プロパティを使用して境界線を指定すると、全体の動的領域に境界線が含まれます。

この動作は、StaticMenuItemStyle プロパティと DynamicMenuItemStyle プロパティの場合とは対照的です。これらのプロパティは各メニュー項目に影響を与えます。たとえば、DynamicMenuItemStyle プロパティを使用して境界線を指定すると、各動的メニュー項目に境界線が含まれます。

StaticSelectedStyle プロパティと DynamicSelectedStyle プロパティは、選択したメニュー項目にのみ影響を与えます。StaticHoverStyle プロパティと DynamicHoverStyle プロパティは、マウス ポインタをメニュー項目に移動したときの、メニュー項目のスタイルに影響を与えます。

メニュー レベル

メニュー項目の外観を制御するには、メニュー構造の各レベルへ個別にスタイルを設定する方法もあります。Menu コントロールには、スタイルのコレクションとして動作する複数のプロパティがあります。つまり、メニュー構造のレベルごとにスタイル情報を含めることができます。

各レベルの外観を指定するために使用できるスタイル プロパティには、名前に "Level" という単語が含まれます。

• LevelMenuItemStyles

• LevelSubMenuStyles

• LevelSelectedStyles

次の例では、最初の 4 レベルのメニュー項目に適用する 4 スタイルのコレクションを作成します。このコレクションは、CssClass 値を使用してスタイル シートで参照できます。

  <LevelMenuItemStyles>
    <asp:MenuItemStyle CssClass="Level1Style" />
    <asp:MenuItemStyle CssClass="Level2Style" />
    <asp:MenuItemStyle CssClass="Level3Style" />
    <asp:MenuItemStyle CssClass="Level4Style" />
  </LevelMenuItemStyles>

コレクションの最初のスタイルは 1 レベル目のメニュー項目に、2 番目のスタイルは 2 レベル目のメニュー項目に適用されます。その後も同様です。レベルのスタイル間に継承はないため、あるレベルに適用されるスタイルは、それより後のレベルに影響を及ぼしません。

次の例では、最初の 3 レベルのメニュー項目に適用する 3 スタイルのコレクションを作成します。このコレクションはスタイル シートで参照できます。

  <LevelSubMenuStyles>
    <asp:SubMenuStyle CssClass="submenulevel1" />
    <asp:SubMenuStyle CssClass="submenulevel2" />
    <asp:SubMenuStyle CssClass="submenulevel3" />
  </LevelSubMenuStyles>

共通メニューのスタイル設定シナリオ

Menu コントロールを構築するときに使用するスタイルは、制御するメニュー項目の外観の数と場所によって変わります。たとえば、各メニュー項目レベルに一貫した外観を指定する場合、LevelMenuItemStyles プロパティを使用して各メニュー レベルのスタイルを設定します。すべての静的メニュー項目の外観を同一にし、すべての動的メニュー項目の外観を同一にする場合、StaticMenuItemStyle プロパティを使用してすべての静的メニュー項目の外観を制御し、DynamicMenuItemStyle プロパティを使用してすべての動的メニュー項目の外観を制御します。

特定項目を作成するために必要なマークアップとスタイル シートのコンテンツの例を次に示します。これは、次のような Menu コントロールを使用する場合のベスト プラクティスの例です。

Font をマークアップの中で使用して全体のメニューのフォントを設定する Menu コントロール プロパティです。

• コントロールの幅は、WidthMenu コントロール プロパティで設定されます。

• LevelMenuItemStyles プロパティは、各メニュー項目レベルのスタイルを指定するときに使用します。

• !important の宣言は、メニューの既定のフォントをオーバーライドするときに、スタイル シートで使用します。

宣言を使用するメニュー コントロールのコード例を次に示します。

<asp:menu id="NavigationMenu1" CssClass="menu1"
  staticdisplaylevels="3"
  staticsubmenuindent="0" 
  orientation="Vertical"
  target="_blank"
  Font-names="Arial, Gill Sans"
  Width="100px"
  runat="server">

  <LevelMenuItemStyles>
    <asp:MenuItemStyle CssClass="level1"/>
    <asp:MenuItemStyle CssClass="level2"/>
    <asp:MenuItemStyle CssClass="level3" />
  </LevelMenuItemStyles>
  
  <StaticHoverStyle CssClass="hoverstyle"/>
  
  <LevelSubMenuStyles>
    <asp:SubMenuStyle CssClass="sublevel1" />
  </LevelSubMenuStyles>
  
  <items>
    <asp:menuitem text="Home" tooltip="Home">
    <asp:menuitem text="Section 1" tooltip="Section 1">
      <asp:menuitem text="Item 1" tooltip="Item 1"/>
      <asp:menuitem text="Item 2" tooltip="Item 2"/>
      <asp:menuitem text="Item 3" tooltip="Item 3"/>
    </asp:menuitem>
    <asp:menuitem text="Section 2" tooltip="Section 2">
      <asp:menuitem text="Item 1" tooltip="Item 1"/>
      <asp:menuitem text="Item 2" tooltip="Item 2">
        <asp:MenuItem Text="Subitem 1"/>
        <asp:menuitem Text="Subitem 2" />
      </asp:menuitem>
      <asp:menuitem text="Item 3" tooltip="Item 3"/>
    </asp:menuitem>
  </asp:menuitem>
  </items>
</asp:menu>

メニュー コントロールの CSS のコード例を次に示します。

.level1
{
    color: White;
    background-color: Black;
    font-variant: small-caps;
    font-size: large;
    font-weight: bold;
}

.level2
{
    color: Blue;
    font-family: Gill Sans MT !important;
    font-size: medium;
    background-color: Gray;
}

.level3
{
    color: black;
    background-color: Silver;
    font-family: Gill Sans MT !important;
    font-size: small;
}

.hoverstyle
{
    font-weight: bold;
}
       
.sublevel1
{
    background-color: Gray !important;
    color: White !important;
    font-variant: small-caps;
}  

最終的な Menu コントロールを次の図に示します。

参照

処理手順

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

概念

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

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