Utilizzo di CSS e degli stili con il controllo Menu

Articolo
10/22/2014

Aggiornamento: novembre 2007

La maggior parte delle caratteristiche dell'aspetto del controllo Menu può essere gestita mediante le proprietà del controllo Menu o fogli di stile CSS. È possibile personalizzare l'aspetto di un menu una volta compreso quali proprietà controllano quali aspetti del rendering. In questo argomento vengono introdotti i tipi di stili esposti dal controllo Menu e suggerite le procedure consigliate per l'impostazione degli stili con il controllo Menu.

È possibile impostare gli attributi dei vari stili direttamente nel tag o utilizzare un foglio di stile. La proprietà CssClass può essere utilizzata per assegnare una classe CSS a uno stile di menu che controlla alcune caratteristiche dell'aspetto del controllo Menu. Nell'esempio seguente viene illustrato come specificare una proprietà CssClass per un numero di proprietà Menu a cui è quindi possibile fare riferimento in un foglio di stile.

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

Si noti che è consigliabile specificare stili inline nel tag oppure utilizzare la proprietà CssClass e specificare gli stili utilizzando un foglio di stile. Non è infatti consigliabile specificare stili inline e utilizzare un foglio di stile, perché potrebbe verificarsi un comportamento imprevisto. Per informazioni generali sull'utilizzo di CSS con i controlli server, vedere Controlli server Web ASP.NET e stili CSS.

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:

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

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.

Un altro approccio per controllare l'aspetto delle voci di menu consiste nell'applicare lo stile a ogni livello della struttura del menu separatamente. Il controllo Menu dispone di diverse proprietà che fungono da insiemi di stili, ovvero possono contenere informazioni sullo stile per ogni livello di una struttura di menu.

Nel nome delle proprietà dello stile che è possibile utilizzare per specificare l'aspetto di ogni livello è inserita la parola "Level":

Nell'esempio seguente viene creato un insieme di quattro stili da applicare ai primi quattro livelli di voci di menu. È possibile fare riferimento a tale insieme in un foglio di stile utilizzando il valore CssClass.

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

Il primo stile dell'insieme viene applicato alle voci di menu di primo livello, il secondo stile alle voci di menu di secondo livello e così via. Si noti che non c'è ereditarietà tra stili di livello. Gli stili applicati a un livello non influiscono pertanto sui livelli successivi.

Nell'esempio seguente viene creato un insieme di tre stili da applicare ai primi tre livelli di voci di menu. È possibile fare riferimento a tale insieme in un foglio di stile.

  <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 tag 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 Menu Font viene utilizzata nel tag per impostare il tipo di carattere per l'intero menu.

La larghezza del controllo viene impostata tramite la proprietà del controllo Width Menu.
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"
  >

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

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;
}
       
.sublevel1
{
    background-color: Gray !important;
    color: White !important;
    font-variant: small-caps;
}

Il controllo Menu finale è illustrato nella figura seguente.