Индивидуальные стили элемента меню ASP.NET

Я надеюсь использовать элемент управления меню ASP.NET для навигации по моему сайту. Однако у меня есть требование, чтобы каждый MenuItem был оформлен по-разному (разные цвета, как статические, так и onHover). Возможно ли это без создания собственного класса, наследуемого от MenuItem?

Мысли о лучшем решении?


person CodeMonkey1313    schedule 01.04.2009    source источник


Ответы (4)


Если не считать переопределения RenderContents в меню, ваши возможности очень ограничены. Большинство из того, что вам нужно, является частным и запечатанным, и вы никуда не денетесь.

Моим решением было бы использовать шаблоны. Вы можете использовать MenuItem.Value или Depth и ItemIndex для идентификации каждого элемента и предоставления необходимых атрибутов.

На странице:

<asp:Menu ID="menu" runat="server" DynamicHorizontalOffset="2" StaticSubMenuIndent="10px">
    <Items>
        <asp:MenuItem Text="Item 1" Value="value 1">
            <asp:MenuItem Text="Item 2" Value="value 2">
                <asp:MenuItem Text="Item 3" Value="value 3"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Item 4" Value="value 4">
                <asp:MenuItem Text="Item 5" Value="value 5"></asp:MenuItem>
            </asp:MenuItem>
            <asp:MenuItem Text="Item 6" Value="value 6"></asp:MenuItem>
        </asp:MenuItem>
        <asp:MenuItem Text="Item 7" Value="value 7"></asp:MenuItem>
        <asp:MenuItem Text="Item 8" Value="value 8"></asp:MenuItem>
    </Items>
    <StaticItemTemplate>
        <asp:Panel runat="server" ForeColor='<%# GetItemColor(Container) %>'>
            <%# Eval("Text") %> - <%# Eval("Value") %>
        </asp:Panel>
    </StaticItemTemplate>
    <DynamicItemTemplate>
        <asp:Panel ID="Panel1" runat="server" ForeColor='<%# GetItemColor(Container) %>'>
            <%# Eval("Text") %> - <%# Eval("Value") %>
        </asp:Panel>
    </DynamicItemTemplate>
</asp:Menu>

В коде (не обращайте внимания на глупость этого кода, он просто демонстрирует принцип):

public Color GetItemColor(MenuItemTemplateContainer container)
{
    MenuItem item = (MenuItem)container.DataItem;

    //identify based value
    if (item.Value == "value 2")
        return Color.Brown;

    //identify based on depth and index
    if (item.Depth == 0)
        switch (container.ItemIndex)
        {
            case 0: return Color.Red;
            case 1: return Color.Blue;
            case 2: return Color.DarkGreen;
            default:
                return Color.Black;
        }
    else
        switch (container.ItemIndex)
        {
            case 0: return Color.Purple;
            case 1: return Color.Aqua;
            case 2: return Color.DarkOrange;
            default:
                return Color.Black;
        }
}
person Ruslan    schedule 01.04.2009
comment
Я не понимаю, как это решает его требование цвета при наведении. Хотя элемент управления Panel имеет свойство ForeColor, как вы показали, у него нет ничего похожего на onmouseover. Если вас просто интересуют цвета элементов меню по умолчанию, вы можете сделать что-то вроде: ‹asp:MenuItem Text=‹span style='color: #006b54;'›Item 4‹/span› Value=Item 4‹/asp :Пункт меню> - person Buggieboy; 03.03.2011

Если кто-то еще столкнется с тем же вопросом...

Быстрый и грязный метод, который сработал для меня, заключается в принудительном добавлении содержимого HTML в MenuItem Text (с соответствующим экранированием). Затем вы можете стилизовать его как хотите в своем CSS или даже настроить каждый элемент меню на использование другого стиля:

<asp:MenuItem Text="<span class=&quot;menuitem_text&quot;>Text Here</span>" />

HTML заканчивается внутри тега <a>:

<li><a  ...><span class="menuitem_text">Text Here</span></a></li>
person Poustic    schedule 30.01.2013
comment
Это определенно работает, но я не уверен, что это слишком грязно или нет? - person ken2k; 20.02.2013
comment
Очень грязно.. Мне нравится. Честно говоря, я не думаю, что вы можете слишком сильно заморачиваться с веб-формами, с самого начала это довольно запутанно. - person Erik Bergstedt; 21.02.2013

Попробуйте так установить стиль для каждого пункта меню:

Код позади:

 mnuMail.Items[1].Text = "<span class=\"bold\">Inbox</span>";  

Класс CSS:

.bold
{
   font-weight: bold;
}
person Samiey Mehdi    schedule 30.08.2014

Если вы создаете меню программно, вы можете добавить атрибуты style и onmouseover/onmouseout при создании каждого элемента MenuItem, например:

menuItem.Attributes["style"] = "color: red;";
menuItem.Attributes["onmouseover"] = "javascript:Highlight(this);";

В качестве альтернативы попробуйте добавить эти атрибуты в разметку, IntelliSense не скажет вам, что они работают, но обычно они работают (я не проверял это специально с MenuItems):

<asp:menuitem navigateurl="Home.aspx" 
    text="Home"
    imageurl="Images\Home.gif"
    popoutimageurl="Images\Popout.jpg"   
    tooltip="Home"
    style="color: red;" onmouseover="Highlight(this);" onmouseout="Unhighlight(this);"/>

Возможно, вам повезет с совместимыми с CSS адаптерами.

Конечно, вы можете создать унаследованный класс и переработать процедуры рендеринга...

person Pawel Krakowiak    schedule 01.04.2009
comment
Добавление его в разметку не работает, выдает ошибку парсера - person CodeMonkey1313; 01.04.2009
comment
И MenuItem не имеет члена Attributes. - person CodeMonkey1313; 01.04.2009
comment
И для элемента меню нет свойства наведения курсора мыши. - person Buggieboy; 03.03.2011