move rpSelected-class to parent-li

[Jelle Spaan | RedMatters]

Hi,

I'm trying to style a RedPanelBar (as a submenu) and now I would like to select an li within this menu when it's active. Problem is that the 'rpSelected'-class is added to it's childelement (rpLink). Is there a simple solution to this? And wouldn't it be (more) obvious to add the "rpSelected" and "rpFocused" to the parent-li instead of its childelement? Because it's possible to select a lot of levels deeper into the DOM starting at some element, but you can't even select 1 level up into the DOM, just by CSS. Obviously it's not a problem when using javascript, but I don't want to use that just for styling-issues.

I hope someone comes up with a simple solution I just overlooked. Or even better, I hope this can be changed into the basic functionality of the control... :)

Thanks in advance!

Menno

[Kate]

Hello Menno,

Can you please give some more details on your scenario and clarify a bit more why you need to apply a css class to the LI element? In general changing the basic functionality of the control is not an easy and trivial task to accomplish. However, I forwarded your request to our development team so that they can look at it.  

Greetings,
Kate
the Telerik team

[Jelle Spaan | RedMatters]

Hi Kate,

basically it comes down to this. Because of the design of the submenu (with flexible background-images, hover-effects and so on) the design has been slices in a way that the active status of the menuitems is put on the <li> and the <li> has some styling on its own, together with its childnodes. For this situation it would be great to actually style down the 'ladder', instead of finding a way to target the parent (the container) of the active-link.

In my opinion it would always be more logical to style down. I figure there are a lot more situations where the <li> itself has to be styled, based on an active-class.

For example:
If I would like to style the li with class "rpItem rpFirst", ONLY when it contains an anchor with the class "rpSelected" (or rpFocused), I can't select/target it by CSS. But I would need to add some JavaScript to the page to get this done. I think it would be no loss to move these classes (selected/focused) to the listitem.

Markup now

<li class="rpItem rpFirst">
  <a href="/title" class="rpLink  rpSelected">
    <span class="rpOut rpNavigation">
      <span class="rpExpandHandle"></span>
      <span class="rpText">Title</span>
    </span>
  </a>
</li>

Markup as suggested

<li class="rpItem rpFirst rpSelected">
  <a href="/title" class="rpLink">
    <span class="rpOut rpNavigation">
      <span class="rpExpandHandle"></span>
      <span class="rpText">Title</span>
    </span>
  </a>
</li>

Possible CSS

.rpItem.rpSelected {
    // some styling
}
.rpItem.rpSelected .rpLink {
    // some styling 

}

[Ivan Zhekov]

Hello Menno,

Some of the things you mentioned are like this due to legacy browsers and accessibility e.g. only links can be "active" or hovered. However, your suggestions do make a point, especially in a browser landscape that is dominated by standard compliant browsers.

As for the things you want to achieve, they are more or less doable, by using a lesser known property of the RadMenuItem -- OuterCssClass, which puts a class name on containing LI element -- and some JS.

Let me know if you need help with that.

On a side note, I have awarded you some Telerik points for the suggestion.

Regards,
Ivan Zhekov
the Telerik team