Utilizzo di CSS e degli stili con il controllo Menu

Il controllo Menu utilizza due modalità di visualizzazione: statica e dinamica. Con la visualizzazione statica l'intera struttura del menu o parte di essa è sempre visibile. In un menu totalmente statico viene visualizzata l'intera struttura e l'utente può fare clic su qualsiasi parte del menu. Con la visualizzazione dinamica porzioni della struttura del menu vengono visualizzate quando il puntatore del mouse viene posizionato su determinate voci e le voci di menu figlio vengono visualizzate solo quando l'utente posiziona il puntatore del mouse su un nodo padre.

La proprietà StaticDisplayLevels definisce quanti livelli di voci di menu sono visualizzati staticamente. Se si dispone di quattro livelli di voci di menu e la proprietà StaticDisplayLevels è impostata su 3, i primi tre livelli vengono visualizzati staticamente, mentre l'ultimo livello dinamicamente.

Per controllare l'aspetto della porzione statica del menu, è possibile utilizzare le proprietà dello stile con la parola "Static" inserita nel nome:

• StaticMenuStyle

• StaticMenuItemStyle

• StaticSelectedStyle

• StaticHoverStyle

Per controllare l'aspetto della porzione dinamica del menu, è possibile utilizzare le proprietà dello stile con la parola "Dynamic" inserita nel nome:

• DynamicMenuStyle

• DynamicMenuItemStyle

• DynamicSelectedStyle

• DynamicHoverStyle

Le proprietà StaticMenuStyle e DynamicMenuStyle influiscono sull'intero insieme di voci di menu statico o dinamico, rispettivamente. Ad esempio, se si specifica un bordo utilizzando la proprietà DynamicMenuStyle, tale bordo verrà applicato all'intera area dinamica.

Per ovviare a questo problema, utilizzare le proprietà StaticMenuItemStyle e DynamicMenuItemStyle. Tali proprietà influiscono su singole voci di menu. Ad esempio, se si specifica un bordo utilizzando la proprietà DynamicMenuItemStyle, tale bordo verrà applicato a ogni singola voce di menu dinamico.

Le proprietà StaticSelectedStyle e DynamicSelectedStyle influiscono solo sulla voce di menu selezionata e le proprietà StaticHoverStyle e DynamicHoverStyle influiscono sullo stile della voce di menu quando il puntatore del mouse viene posizionato sulla voce.

Livelli di menu

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

Gli stili utilizzati per formattare un controllo Menu dipendono da quanto e dove si desidera controllare l'aspetto delle voci di menu. Se ad esempio si desidera che ogni livello di voce di menu abbia un aspetto coerente, utilizzare la proprietà LevelMenuItemStyles per applicare lo stile a ogni livello del menu. Se si desidera che tutte le voci di menu statico abbiano lo stesso aspetto e che tutte le voci di menu dinamico abbiano lo stesso aspetto, è possibile utilizzare la proprietà StaticMenuItemStyle per controllare l'aspetto di tutte le voci di menu statico e la proprietà DynamicMenuItemStyle per controllare l'aspetto di tutte le voci di menu dinamico.

Nell'esempio seguente viene illustrato il contenuto del markup e del foglio di stile necessario creare un menu specifico. In questo esempio vengono presentate alcune procedure consigliate in caso di utilizzo del controllo Menu, tra cui:

La proprietà del controllo MenuFont viene utilizzata nel markup per impostare il tipo di carattere per l'intero menu.

• La larghezza del controllo viene impostata tramite la proprietà del controllo WidthMenu.

• La proprietà LevelMenuItemStyles viene utilizzata per specificare lo stile di ogni livello di voce di menu.

• La dichiarazione !important viene utilizzata nel foglio di stile per eseguire l'override del tipo di carattere predefinito per il menu.

Nell'esempio seguente viene fornito il codice dichiarativo per il controllo del menu.

<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" />
    <asp:MenuItemStyle CssClass="level4" />
  </LevelMenuItemStyles>
  
  <StaticHoverStyle CssClass="hoverstyle"/>
  
  <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>

Nell'esempio seguente viene riportato il codice CSS per il controllo del menu.

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

.level4
{
    background-color: Gray !important;
    color: White !important;
    font-size: small;
}   

Il controllo Menu finale è illustrato nella figura seguente.

Attività

Concetti