AspNet-Menu-WithChildren AspNet-Menu-ChildSelected RRS feed

  • Question

  • User1464463793 posted

    Okay, I'm picking CSS up as I go along but I can't figure out how to reference this class in CSS for the life of me.

    I know how to reference the AspNet-Menu-ChildSelected in CSS as .MainMenu ul.AspNet-Menu li.AspNet-Menu-ChildSelected { }.

    But I'm not sure how to reference the rendered "AspNet-Menu-WithChildren AspNet-Menu-ChildSelected" class on the <li> element.

    Can anyone point me in the right direction?


    Thursday, June 28, 2007 10:55 PM

All replies

  • User-534056067 posted

    When an HTML tag has a CLASS attribute that lists more than one class (separated by spaces) then you can pretend that the element has both classes individually, but in the order they are listed.

    Suppose you have a DIV whose class is MainMenu. Within that DIV you have a UL whose class is AspNet-Menu. Within that UL you have one or more LI tags. Those LI tags thas have child UL tags are denoted with a CLASS value of AspNet-Menu-WithChildren. If one of the child LI tags is the "selected" menu item then its parent LI is additionally classed with AspNet-Menu-ChildSelected.

    That allows you to create a rule governing typical menu items that have children:

    .AspNet-Menu-WithChildren { background: green; }

    But specially denote those menu items that have a child that is the selcted menu element by defining a class like:

    .AspNet-Menu-ChildSelected { background: yellow; }

    If you have a site with multiple menus you probably want to avoid conflicts between your menu-related CSS rules so you would further specialize the selectors as:

    .MainMenu .AspNet-Menu-ChildSelected {}

    You can add to the selector to make it even more specific (less prone to accidental conflicts) if you like.

    Make sense? See the kit's tutorial for more details on using the selected classe, http://www.asp.net/cssadapters/walkthru/walkthrough.aspx#SimpleMenu.

    Friday, June 29, 2007 4:12 AM
  • User1464463793 posted

    Thanks for the explanation Russ.  I got it now.   BTW, thanks for the great tool too!

    Friday, June 29, 2007 12:17 PM