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

Статья
10/22/2014

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

Можно использовать изображения для обозначения пунктов дополнительных дочерних меню, доступных при наведении указателя мыши на пункт меню. Можно также использовать изображения для отделения статических или динамических пунктов меню или в качестве фона для всего меню или уровня пунктов меню.

Можно указать используемые изображения и способ отображения этих изображений с помощью спецификации каскадных таблиц стилей (CSS) и свойств элемента управления Menu.

Использование выступающих изображений по умолчанию

Можно использовать любое из двух свойств или оба свойства, чтобы назначить изображения, обозначающие пункты дочерних меню, не отображаемые при первой визуализации элемента управления Menu. Для использования изображения по умолчанию, чтобы указать, что статический пункт меню имеет дочерние пункты, установите для свойства StaticEnableDefaultPopOutImage значение true; чтобы использовать изображение по умолчанию для динамического пункта меню с дочерними элементами, установите для свойства DynamicEnableDefaultPopOutImage значение true. Установка значения false для любого из свойств или для обоих свойств скрывает изображение черной стрелки по умолчанию для каждого пункта меню, включающего дочерние пункты меню.

В следующем примере для обоих свойств устанавливается значение true, поэтому для любых статических или динамических пунктов меню, включающих дочерние пункты, будет отображаться изображение черной стрелки по умолчанию.

    <asp:Menu ID="Menu1" runat="server" 
        StaticEnableDefaultPopOutImage="true"
        DynamicEnableDefaultPopOutImage="true">

Задание пользовательских значков индикаторов

Чтобы использовать пользовательские изображения, созданные для значков индикаторов, необходимо назначить значения для свойств StaticPopOutImageUrl и DynamicPopOutImageUrl. Каждое из свойств задает расположение и имя файла для указания используемого изображения. Свойство StaticPopOutImageUrl регулирует изображение, используемое для статических пунктов меню, а свойство DynamicPopOutImageUrl регулирует изображение, используемое для динамических пунктов меню.

В следующем примере для статических и динамических значков индикаторов устанавливается изображение Greenarrow.gif, расположенное в каталоге изображений.

    <asp:Menu ID="Menu1" Runat="server" 
        StaticPopOutImageUrl="~/images/greenarrow.gif"
        DynamicPopOutImageUrl="~/images/greenarrow.gif">

Задание изображений разделителя

Пункты меню на одном уровне можно отделить друг от друга с помощью изображения разделителя. Можно задать изображения разделителя, отображающиеся над и под пунктами меню на определенном уровне, или изображения разделителя для всех уровней статического или динамического меню. Для задания изображений разделителя используются четыре свойства: два свойства для нижних и верхних разделителей статических пунктов меню и два свойства для верхних и нижних разделителей динамических пунктов меню:

В следующем примере указывается отображение изображения Greenseparator.gif под каждым статическим пунктом меню.

    <asp:Menu ID="Menu2" Runat="server" 
        StaticBottomSeparatorImageUrl="~/greenseparator.gif">

Задание изображений прокрутки

Если задается большое число пунктов меню, всплывающее окно, используемое для отображения динамических пунктов меню, возможно, не будет раскрываться таким образом, чтобы отображать все пункты меню. Элемент управления Menu автоматически создает полосы прокрутки, чтобы пользователи могли прокручивать список пунктов меню. Можно использовать свойства ScrollDownImageUrl и ScrollUpImageUrl, чтобы назначить пользовательские стрелки или иные изображения для значков прокрутки вверх и вниз на полосе прокрутки.

В следующем примере показано использование этих двух свойств, чтобы задать пользовательские изображения для стрелок полосы прокрутки.

    <asp:Menu ID="Menu1" Runat="server" 
        ScrollUpImageUrl="~/images/greenuparrow.gif"
        ScrollDownImageUrl="~/images/greenuparrow.gif"

Задание размера изображения в CSS

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

Если для пункта меню используется изображение, сначала назначьте имя класса свойству WebControl.CssClass пункта меню с использованием изображения в разметке HTML. Затем можно указать размер изображения в CSS. В следующем примере задается имя класса «элемент меню» свойствам StaticMenuItemStyle и DynamicMenuItemStyle.

<StaticMenuItemStyle CssClass="menuitem" />
<DynamicMenuItemStyle CssClass="menuitem" />

В файле CSS, на который имеется ссылка на странице, содержащей меню, затем указывается класс CSS пункта меню и устанавливается размер изображения.

В следующем примере создается ссылка на класс CSS «пункт меню» и задается использование изображения 40 точек на 40 точек для указания, что пункт меню включает дочерние пункты.

.menuitem {} /*Style code for each menu item goes here. */
.menuitem img 
{
  width: 40px;
  height: 40px;
}

См. также

Задачи

Пошаговое руководство. Отображение меню на веб-страницах

Пошаговое руководство. Программное управление меню ASP.NET

Основные понятия

Серверные веб-элементы управления ASP.NET и стили CSS

Общие сведения об элементе управления Menu

Поделиться через