共用方式為

在功能表控制項上使用 CSS 和樣式

更新：2007 年 11 月

使用 Menu 控制項的屬性或階層式樣式表 (CSS) 可以管理幾乎所有方面的 Menu 控制項外觀。了解屬性所控制的呈現外觀，您可以修改功能表的外觀。本主題將介紹 Menu 控制項所公開 (Expose) 的樣式種類，並建議在使用 Menu 控制項設定樣式時的一些最佳作法。

您可以直接在標記中設定不同樣式的屬性，或是使用樣式表。CssClass 屬性可以用來指派 CSS 類別 (Class) 給控制某些方面之 Menu 控制項外觀的功能表樣式。下列範例將示範如何為一些 Menu 屬性指定 CssClass 屬性，之後您便可以在樣式表中參考這些屬性。

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

請注意，最佳作法是在標記中指定內嵌樣式 (Inline Style)，或是使用 CssClass 屬性並使用樣式表指定樣式。不建議您同時指定內嵌樣式和使用樣式表，因為可能會發生未預期的行為。如需搭配上伺服器控制項使用 CSS 的一般性討論，請參閱 ASP.NET Web 伺服器控制項和 CSS 樣式。

功能表行為和樣式

Menu 控制項有兩種顯示模式：靜態和動態。靜態顯示表示部分或全部的功能表結構一直都是可見的，完全靜態的功能表會顯示整個功能表結構，而且使用者可以點選其中的任一部分。動態顯示表則表示當滑鼠指標移至某些項目上時會顯示部分的功能表結構，而子功能表項目只有在使用者保持滑鼠指標在父節點上才會顯示。

StaticDisplayLevels 屬性會指定有多少功能表項目層級要以靜態方式顯示。如果您有四層的功能表項目，而且 StaticDisplayLevels 屬性是設為 3，則前三層會以靜態方式顯示，但最後一層的功能表項目會以動態方式顯示。

若要控制功能表靜態部分的外觀，您可以在樣式屬性名稱中加上 "Static" 單字：

若要控制功能表動態部分的外觀，您可以在樣式屬性名稱中加上 "Dynamic" 單字：

StaticMenuStyle 和 DynamicMenuStyle 屬性分別會對整組的靜態或動態功能表項目發生作用。例如，如果使用 DynamicMenuStyle 屬性指定了框線，則整個動態區域都會有框線。

將這個行為與 StaticMenuItemStyle 和 DynamicMenuItemStyle 屬性做對照，這兩個屬性會影響個別功能表項目。例如，如果使用 DynamicMenuItemStyle 屬性指定了框線，則各個功能表項目都會有自己的框線。

StaticSelectedStyle 和 DynamicSelectedStyle 屬性只會對所選取的功能表項目有所作用，而 StaticHoverStyle 和 DynamicHoverStyle 屬性則會在滑鼠指標移至功能表項目上時對功能表項目的樣式產生作用。

功能表層級

另一個控制功能表項目外觀的方法是，分別對功能表結構中的每個層級套用樣式。Menu 控制項有幾個可做為樣式集合的屬性，也就是說這些屬性可以為功能表結構的每個層級包含樣式資訊。

您可以用來為每個層級指定外觀的樣式屬性都在其屬性名稱中有加上 "Level" 的單字：

下列範例將建立四個樣式的集合，這四個樣式會套用至前四層的功能表項目並藉由使用 CssClass 值而可在樣式表中參考。

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

在集合中的第一個樣式會套用至第一層的功能表項目、第二個樣式會套用至第二層的功能表項目如此類推。請注意，層級樣式之間並沒有繼承關係，因此套用至第一層的樣式不會影響其後的層級。

下列範例將建立三個樣式的集合，這三個樣式會套用至前三層的功能表項目並可在樣式表中參考。

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

一般功能表樣式案例

您用來格式化 Menu 控制項的樣式會取決於想要控制功能表項目外觀的數量和位置。例如，如果想要讓每個功能表項目層級都有一致的外觀，可以使用 LevelMenuItemStyles 屬性對每個功能表層級套用樣式。如果想要讓所有靜態功能表項目都有一致的外觀，而且讓所有動態功能表項目都有一致的外觀，則可以使用 StaticMenuItemStyle 屬性控制所有靜態功能表項目的外觀，以及使用 DynamicMenuItemStyle 屬性控制所有動態功能表項目的外觀。

下列範例將顯示建立特定功能表所需的標記樣式表內容，並示範在使用 Menu 控制項時的一些最佳作法，包括：

在標記中是使用 Menu 控制項的 Font 屬性來設定全部功能表的字型。

  • 控制項的寬度是由 Menu 控制項的 Width 屬性設定。

  • LevelMenuItemStyles 屬性試用來指定每個功能表項目層級的樣式。

  • 在樣式表中是使用 !important 宣告來覆寫功能表的預設字型。

下列範例提供的是功能表控制項的宣告式程式碼。

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

  <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 樣式

在功能表控制項上使用影像

  • Last updated on