Использование CSS и стилей с элементом управления меню

Обновлен: Ноябрь 2007

Практически каждый аспект внешнего вида элемента управления Menu можно настроить с помощью свойств элемента управления Menu или каскадных таблиц стилей (CSS). Описание того, какие свойства управляют аспектами отрисовки, поможет настроить внешний вид меню. Этот раздел описывает типы стилей, предоставляемые элементом управления Menu, и показывает рекомендации по заданию стилей с помощью элемента управления Menu.

Атрибуты различных стилей можно задать напрямую в разметке или при помощи таблицы стилей. Свойство CssClass можно использовать для того, чтобы присвоить класс CSS к стилю меню, который управляет определенным аспектом внешнего вида элемента управления Menu. В следующем примере показано, как указать свойство CssClass для нескольких свойств Menu, на которые затем можно ссылаться в таблице стилей.

<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 и стили CSS.

Поведение и стили меню

Элемент управления Menu использует два режима отображения: статический и динамический. Статическое отображение подразумевает, что часть или вся структура меню всегда видима. Полностью статическое меню отображает всю свою структуру, а пользователь может щелкнуть любую его часть. При динамическом отображении части меню отображаются только в том случае, если указатель мыши наведен на конкретные элементы, а дочерние элементы меню — только в том случае, если пользователь держит указатель на родительском узле.

Свойство StaticDisplayLevels показывает количество статически отображаемых уровней меню. Например, если меню имеет четыре уровня, а свойство StaticDisplayLevels имеет значение 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

В следующем примере кода создается коллекция из четырех стилей, которые применяются к четырем первым уровням элементов меню и на которые можно сослаться в таблице стилей при помощи значения 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, в том числе следующие:

Свойство Font элемента управления Menu используется в разметке для задания шрифта для всего меню.

• Ширина элемента управления задается свойством Width элемента управления Menu.

• Свойство 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 и стили CSS

Использование изображений с элементом управления меню