Verwenden von CSS und Formatvorlagen mit dem Menüsteuerelement

Artikel
10/22/2014

Aktualisiert: November 2007

Sie können die Anzeige des Menu-Steuerelements über die Eigenschaften des Menu-Steuerelements oder mit CSS (Cascading Stylesheets) weitgehend anpassen. Durch das Verständnis der Eigenschaften und deren Auswirkung auf die verschiedenen Bereiche der Wiedergabe können Sie die Darstellung eines Menüs Ihren Bedürfnissen entsprechend steuern. In diesem Thema werden die Typen von Formatvorlagen erläutert, die über das Menu-Steuerelement zur Verfügung stehen, und Empfehlungen zum Festlegen von Formatvorlagen mit dem Menu-Steuerelement aufgeführt.

Sie können die Attribute der verschiedenen Formatvorlagen direkt im Markup festlegen oder ein Stylesheet verwenden. Mithilfe der CssClass-Eigenschaft können Sie einer Menüformatvorlage eine CSS-Klasse zuweisen, mit der einige Bereiche der Anzeige des Menu-Steuerelements festgelegt werden. Im folgenden Beispiel wird erläutert, wie eine CssClass-Eigenschaft für mehrere Menu-Eigenschaften festgelegt wird, auf die dann in einem Stylesheet verwiesen werden kann.

<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>  
...

Es wird empfohlen, entweder Inlineformatvorlagen im Markup festzulegen oder die CssClass-Eigenschaft zu verwenden, um Formatvorlagen mit einem Stylesheet anzugeben. Sie sollten jedoch nicht gleichzeitig Inlineformatvorlagen festlegen und ein Stylesheet verwenden, da dieses Vorgehen zu unerwartetem Verhalten führen kann. Eine allgemeine Erläuterung der Verwendung von CSS mit Serversteuerelementen finden Sie unter ASP.NET-Webserversteuerelemente und CSS-Formatvorlagen.

Menüverhalten und Formatvorlagen

Das Menu-Steuerelement verwendet zwei Anzeigemodi: statisch und dynamisch. Statische Anzeige bedeutet, dass die Menüstruktur immer vollständig oder teilweise angezeigt wird. In einem vollständig statischen Menü wird die gesamte Menüstruktur angezeigt, und ein Benutzer kann auf jeden beliebigen Bereich klicken. Dynamische Anzeige bedeutet, dass Teile der Menüstruktur dann eingeblendet werden, wenn mit dem Mauszeiger auf bestimmte Elemente gezeigt wird. Untergeordnete Menüelemente werden nur angezeigt, wenn der Benutzer mit dem Mauszeiger auf den übergeordneten Knoten zeigt.

Durch die StaticDisplayLevels-Eigenschaft wird festgelegt, wie viele Ebenen der Menüelemente statisch angezeigt werden. Wenn die Menüelemente auf vier Ebenen angeordnet sind und für die StaticDisplayLevels-Eigenschaft der Wert 3 festgelegt wurde, werden die Menüelemente der ersten drei Ebenen statisch und die der vierten Ebene dynamisch angezeigt.

Mit den Stileigenschaften, die den Begriff "Static" im Namen enthalten, können Sie die statischen Bereiche des Menüs steuern:

Mit den Stileigenschaften, die den Begriff "Dynamic" im Namen enthalten, können Sie die dynamischen Bereiche des Menüs steuern:

Die StaticMenuStyle-Eigenschaft und die DynamicMenuStyle-Eigenschaft beeinflussen sämtliche statischen bzw. dynamischen Menüelemente. Wenn Sie beispielsweise mithilfe der DynamicMenuStyle-Eigenschaft einen Rahmen festlegen, wird der gesamte dynamische Bereich mit einem Rahmen angezeigt.

Vergleichen Sie dieses Verhalten im Gegensatz zur StaticMenuItemStyle-Eigenschaft und zur DynamicMenuItemStyle-Eigenschaft. Diese Eigenschaften beeinflussen einzelne Menüelemente. Wenn Sie mithilfe der DynamicMenuItemStyle-Eigenschaft einen Rahmen festlegen, wird jedes dynamische Menüelement mit einem eigenen Rahmen angezeigt.

Die StaticSelectedStyle-Eigenschaft und die DynamicSelectedStyle-Eigenschaft wirken sich ausschließlich auf das ausgewählte Menüelement aus. Die StaticHoverStyle-Eigenschaft und die DynamicHoverStyle-Eigenschaft wirken sich auf die Formatvorlage des Menüelements aus, wenn mit dem Mauszeiger darauf gezeigt wird.

Menüebenen

Sie können die Anzeige der Menüelemente auch steuern, indem Sie für jede Ebene der Menüstruktur eine Formatvorlage festlegen. Das Menu-Steuerelement bietet verschiedene Eigenschaften, die als Formatauflistungen dienen, d. h., sie können für jede Ebene einer Menüstruktur Formatierungsinformationen enthalten.

Die Formatierungseigenschaften, mit denen Sie die Anzeige der einzelnen Ebenen festlegen können, enthalten im Namen den Begriff "Level".

Im folgenden Beispiel wird eine Auflistung mit vier Formatvorlagen erstellt, die auf die ersten vier Ebenen der Menüelemente angewendet werden und auf die mit dem Wert CssClass in einem Stylesheet verwiesen werden kann.

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

Die erste Formatvorlage in der Auflistung wird auf Menüelemente der ersten Ebene angewendet, die zweite Formatvorlage auf Menüelemente der zweiten Ebene usw. Beachten Sie, dass zwischen den verschiedenen Ebenen keine Vererbung erfolgt. Formatvorlagen, die auf eine Ebene angewendet werden, wirken sich nicht auf untergeordnete Ebenen aus.

Im folgenden Beispiel wird eine Auflistung mit drei Formatvorlagen erstellt, die auf die ersten drei Ebenen der Menüelemente angewendet werden und auf die in einem Stylesheet verwiesen werden kann.

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

Allgemeines Szenario für die Menüformatierung

Welche Formatvorlagen zur Formatierung eines Menu-Steuerelements verwendet werden, ist davon abhängig, in welchem Umfang und auf welchen Ebenen Sie die Anzeige der Menüelemente festlegen möchten. Mit der LevelMenuItemStyles-Eigenschaft können Sie beispielsweise festlegen, dass jede Menüebene im gleichen Format angezeigt wird. Wenn alle statischen bzw. dynamischen Menüelemente in jeweils einheitlichem Format angezeigt werden sollen, können Sie mithilfe der StaticMenuItemStyle-Eigenschaft die Anzeige aller statischen Menüelemente und mit der DynamicMenuItemStyle-Eigenschaft die Anzeige aller dynamischen Menüelemente festlegen.

Im folgenden Beispiel werden die Markup- und Stylesheetinhalte erläutert, die zur Erstellung eines bestimmten Menüs erforderlich sind. In diesem Beispiel werden u. a. folgende empfohlene Vorgehensweisen bei der Verwendung des Menu-Steuerelements veranschaulicht:

Mit der Menu-Steuerelementeigenschaft Font wird im Markup die Schriftart für das gesamte Menü festgelegt.

Die Breite des Steuerelements wird mit der Width Menu-Steuerelementeigenschaft festgelegt.
Mit der LevelMenuItemStyles-Eigenschaft wird das Format für jede Menüelementebene festgelegt.
Die !important-Deklaration wird im Stylesheet verwendet, um die Standardschriftart des Menüs zu überschreiben.

Im folgenden Beispiel ist der deklarative Code für das Menüsteuerelement aufgeführt.

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

Das folgende Beispiel enthält den CSS-Code für das Menüsteuerelement.

.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;
}

Das endgültige Menu-Steuerelement ist in der folgenden Abbildung dargestellt.