ASP：菜单项/ CSS [英] asp:MenuItem / CSS

问题描述

我有一个asp的菜单，菜单项只有1（顶级）。每个菜单项的需要具有由CSS被识别以不同的方式（对于唯一的悬停等）。我试图避免的JavaScript的解决方案。

目前我能找到没有办法只有ASP和CSS来控制单个的菜单项。任何帮助将是AP preciated！

 ＆LT; ASP：菜单ID =NavigationMenu=服务器的CssClass =菜单的EnableViewState =假
                    IncludeStyleBlock =false的方向=横向＆GT;    ＆LT;项目＆GT;
        ＆LT; ASP：菜单项NavigateUrl =〜/ Default.aspx的文本=我的选项/＆GT;
        ＆LT; ASP：菜单项NavigateUrl =foo.aspx文本=等/＆GT;
    ＆LT; /项目＆GT;
＆LT; / ASP：菜单＆gt;
 

解决方案

比方说你有

 ＆LT; UL类=菜单＆GT;
＆LT;立GT;＆LT; A HREF =＃foo1＆gt;首先项目＆lt; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃foo2的＆gt;第二个项目＆lt; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃foo3＆GT;三是项目＆lt; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃foo4＆GT;四是项目＆lt; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =＃foo5＆GT;第五项＆lt; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
 

如果你想使用的属性选择，你会做如

  ul.menu＆GT;李＆gt;将[HREF =foo1]：悬停
{
背景色：蓝色;
}
 

如果你想使用伪类，你会做如

  ul.menu＆GT;李：第n个孩子（1）＆gt;将：悬停
{
背景色：蓝色;
}
 

如果你想使用class和id所需的类或ID只是添加到李时珍在HTML和简单的使用

  ul.menu＆GT; li.class_name＆gt;一种：悬停/ *类使用* /
{
背景色：蓝色;
}ul.menu＆GT; li.id_name＆gt;一种：悬停/ * ID使用* /
{
背景色：蓝色;
}
 

您probally不需要选择是具体如上并且可以省略UL和别人一样。这仅仅是一个例子。请记住，伪类和属性选择器变化了跨浏览器的支持。

I have an asp menu, with only 1 (top) level of menu items. Each of the menu items needs to have a different way to be recognized by CSS (for unique hover, etc.). I'm trying to avoid a javascript solution.

Currently I can find no way with just asp and CSS to control individual menu items. Any help would be appreciated!

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
                    IncludeStyleBlock="false" Orientation="Horizontal">

    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="My Tab" />
        <asp:MenuItem NavigateUrl="foo.aspx" Text="etc" />
    </Items>
</asp:Menu>

解决方案

Lets say you have

<ul class="menu">
<li><a href="#foo1">First Item</a></li>
<li><a href="#foo2">Second Item</a></li>
<li><a href="#foo3">Third Item</a></li>
<li><a href="#foo4">Fourth Item</a></li>
<li><a href="#foo5">Fifth Item</a></li>
</ul>

If you want to use the attribute selector, you would do as

ul.menu>li>a[href="foo1"]:hover
{
background-color: blue;
}

If you want to use the pseudo class, you would do as

ul.menu>li:nth-child(1)>a:hover
{
background-color: blue;
}

If you want to use class or id just add the required class or ID to the li in the HTML and simply use

ul.menu>li.class_name>a:hover /*class used*/
{
background-color: blue;
}

ul.menu>li.id_name>a:hover /*id used*/
{
background-color: blue;
}

You probally dont need the selector to be as specific as above and may omit the ul and others alike. It is just for an example. Please keep in mind that the pseudo class and attribute selector has varied support across browsers.

这篇关于ASP：菜单项/ CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！