[Solved] RadMenu cursor style on hover

[Baal]

My RadMenu does not have cursor defined, so it always shows the regular cursor when hovered over a menu item. I want to change it to pointer (hand) on hover. I cannot do it from the css because not all items have url tied to them, especially the ones that have child nodes tied to them. Here's my xml example.

<Menu>
   <Group Flow="Vertical">
      <Item Text="Products">
         <Group>
            <Item Text="Product1" Href="~/Product1.aspx" Value="Product1" />
            <Item Text="Product2" Href="~/Product2.aspx" Value="Product2" />
            <Item Text="Product3" Href="~/Product3.aspx" Value="Product3" />
         </Group>
      </Item>
      <Item Text="Usage">
         <Group>
            <Item Text="Region">
               <Group>
                  <Item Text="Asia" Href="~/Asia.aspx" Value="Asia" />
                  <Item Text="Europe" Href="~/Europe.aspx" Value="Europe" />
               </Group>
            </Item>
         </Group>
      </Item>
   </Group>
</Item>

As you can see, Products, Usage, and Region don't have urls tied to them. So when user hovers on them, I want the cursor to be the default one, but when they hover on others, eg. Product1-3, Asia, or Eurpoe, I want the cursor to turn to pointer (hand).

What is the best way I can achieve this?

This is what I currently have. It is on server-side. However, I think client-side approach will be better.

foreach (RadMenuItem rmItem in rmMenu.Items)
{
    ChangeCursorStyle(rmItem);
}

private void ChangeCursorStyle(RadMenuItem rmItem)
{
    if (!String.IsNullOrEmpty(rmItem.NavigateUrl))
        rmItem.Style.Add("cursor", "pointer");

    foreach (RadMenuItem item in rmItem.Items)
    {
        ChangeCursorStyle(item);

    if (!String.IsNullOrEmpty(item.NavigateUrl))
    {
        item.Style.Add("cursor", "pointer");
    }
}

Thanks.

[Veronica]

Hi Baal,

I suggest you another solution from Javascript. Just make a CSSClass with the changed cursor and use it on hover  like this:

<style type="text/css">
        .Cursor
        {
        }
        .Cursor:hover
        {
            cursor:pointer !important;
        }
    </style>

Note the use of the !important modifier on the new CSS rule. This is to force the new rule to override any more specific CSS rules for hovered items in the CSS file for the skin.  Without the !important modifier, the new CSS rule would not take effect.

Set the class to only the items which have NavigateUrl property:

<telerik:RadMenuItem runat="server" Text="Product 1" Href="~/Product1.aspx" Value="Product1"
                           CssClass="Cursor">

I've attached the full code as a .zip file.

Please let me know if this was helpful.

Regards,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Baal]

Thank you Veronica. I will try the solution.