RadMenu cursor style on hover

3 posts, 0 answers
  1. Baal
    Baal avatar
    47 posts
    Member since:
    Mar 2008

    Posted 12 Mar 2010 Link to this post

    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.
  2. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 16 Mar 2010 Link to this post

    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.
  3. Baal
    Baal avatar
    47 posts
    Member since:
    Mar 2008

    Posted 16 Mar 2010 Link to this post

    Thank you Veronica. I will try the solution.
Back to Top