2

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>
moreisee
  • 408
  • 8
  • 17
  • Can you not class selector. This will require you to change your HTML. You can also use pseudo classes based on the menu items position in its parent ul element such as :nth-child(n). Or my favoirite, you can use the attribute selector with the href attribute of the a within the li as the href will contain probally differemt URL's. – Jawad Jun 17 '11 at 18:44
  • That's not a bad idea. I'm pretty new to this, so in CSS I can reference the main CssClass of the menu and then reference the particular menuitem from it's href? – moreisee Jun 17 '11 at 18:49
  • This one helped me a lot - http://reference.sitepoint.com/css/selectorref – Jawad Jun 17 '11 at 19:07

1 Answers1

1

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.

Jawad
  • 8,352
  • 10
  • 40
  • 45
  • Hrmm - yeah I was looking into it a bit, noticed that the pre IE9 support and Safari support (?) may not be what it could. Also, I trust that it will work just as well for this menu structure: Didn't format well, editing main post. – moreisee Jun 17 '11 at 19:08
  • It should. I would personally go with the class/id method as it would be well supported. But that's just me. The pseudo class method has a lesser degree of support specially in older browsers. And the Attribute Selector when used along with the "=" and not mentioning the others (~, $, |, *), has reasonable support. It all depends offcourse which browsers you want to support. – Jawad Jun 17 '11 at 19:17
  • Worked great! Had to change it a little: `div.menu li:nth-child(1) a:hover { background-color: red; }` – moreisee Jun 20 '11 at 16:59
  • You are using a combinator of space instead of ">". The space combinator in for example "div.menu li" means that select "li" which is a decenadnt of "div.menu". If you use ">" combinator, it means select "li" which is a child of "div.menu". A child is necessarliy a decendant but a decendant is not necessirly a child since it can be a grand child, great grand child and so on to use the human biliogy anology. Just for you info. Cheers! – Jawad Jun 20 '11 at 17:23
  • Ahh - I think I understand, will keep playing around with it. Thanks again! :) – moreisee Jun 20 '11 at 17:38