+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Controlling RadMenu Over States

Controlling RadMenu Over States

16 posts, 0 answered
  1. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    25 May 2009
    Link to this post
    Hi there,

    I want to know how I can better control the over states of the RadMenu in Sitefinity please?

    I have two scenarios:

    1. The current nav needs to stay active for the page that I am on. So, if I am on the About section of my site, the About over state needs to be active.

    2. I have a drop down menu from my Services menu which list about four items. When I roll over the subcategories un Services, the Services button needs to remain active too.

    I hope this makes sense and if someone can help I would greatly appreciate it.

    Many thanks,
    James
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    26 May 2009
    Link to this post
    Hello James,

    I suggest that you should use RadMenuItem HighlightPath(). In Sitefinity we have made this integration using item.CssClass property.

    CmsSiteMapNode currentNode = SiteMap.CurrentNode as CmsSiteMapNode; 
            if (currentNode != null && currentNode.ParentNode != null
            { 
                while (currentNode.ParentNode != SiteMap.RootNode) 
                { 
                    RadMenuItem item2 = this.RadMenu1.FindItemByUrl(this.ResolveUrl(currentNode.Url)); 
                    if (item2 != null
                    { 
                        item2.CssClass = this.selectedItemCssClass; 
                    } 
                    currentNode = currentNode.ParentNode as CmsSiteMapNode; 
                } 

    You can set the selectedItemCssClass and the path to your item will be highlighted. Thus you will not be lost" when navigating through multi-level menus.

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    27 May 2009
    Link to this post
    Hi Dimitri.

    Thanks for this, I appreciate it!

    From a complete beginners point of view though; think of yourself as someone who's never touched ASP.net :o) can you please explain where I would even begin?

    I have a project I have set up for this client of ours and I can see that I can drop a RAD Menu onto my Web Form but I am plugging the menu into my site from within Sitefinity so where would I make your suggested changes then?

    (Can I make a suggestion for these forums? During the registration process on Sitefinity, can you not ask the user what skill level they are at, maybe on a scale of 1 to 10, ten being an advanced user. That way, you guys will have a better idea of who you are talking to and will better be able to help us with from the level we are on) Just a thought.

    Thanks,
    James
  4. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    27 May 2009
    Link to this post
    Apologies, I meant to Ivan and not Dimitri ;o)
  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    27 May 2009
    Link to this post
    Hello James,

    Thank you for your suggestion and feedback.

    I have a project I have set up for this client of ours and I can see that I can drop a RAD Menu onto my Web Form but I am plugging the menu into my site from within Sitefinity so where would I make your suggested changes then?

    You can find the declaration and code behind of built in SiteMenu control in the following directory:
    ~/Sitefinity/UserControls/Navigation35/

    In the control declaration you can add css class that will highlight the path.
    Sample code:

    <style type="text/css"
    .selectedItem 
     background-color: Red; 
     
    </style> 

    You can set the selectedItem css class through control designer in Sitefinity UI - Appearance>> SelectedItemCssClass property.

    Documentation:

    RadControl developer manual
    Telerik Demos
    MSDN
    QuickStart ASP.NET

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    27 May 2009
    Link to this post
    Hi Ivan,

    Thanks for that. The over state works on the active page now.

    What I need also is for the navigation button to remain active when I hover over the drop down menu. Exactly as it does here:


    So if I hover over corporate and go down to careers, the Corporate Nav button remains active.

    Thanks,
    James
  7. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    29 May 2009
    Link to this post
    Hi Ivan,

    Could you please send me the example code that you guys used to create the menus on this page?


    Thanks,
    James
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 May 2009
    Link to this post
    Hi James,

    You can get the code from DefaultCS.aspx.cs tab of the RadTabStrip menu.

    You can get the same functionality in Sitefinity. You should open ~/Sitefinity/UserControls/Navigation35/SiteMenu.ascx.cs and comment the following code form RadMenu ItemDataBoundEvent

            CmsSiteMapNode currentNode = SiteMap.CurrentNode as CmsSiteMapNode; 
            if (currentNode != null && currentNode.ParentNode != null
            { 
                while (currentNode.ParentNode != SiteMap.RootNode) 
                { 
                    RadMenuItem item2 = this.RadMenu1.FindItemByUrl(this.ResolveUrl(currentNode.Url)); 
                    if (item2 != null
                    { 
                        item2.CssClass = this.selectedItemCssClass; 
     
                    } 
                    currentNode = currentNode.ParentNode as CmsSiteMapNode; 
                } 
                RadMenuItem item = this.RadMenu1.FindItemByUrl(this.ResolveUrl(currentNode.Url)); 
                if (item != null
                { 
                    if (currentNode.PageType == CmsPageType.Group) 
                    { 
                        if (item.Attributes["PageID"].Equals(currentNode.PageID.ToString())) 
                        { 
                            item.CssClass = this.selectedItemCssClass; 
                        } 
                    } 
                    else 
                    { 
                        // here you can set the style for the top-level item    
                        item.CssClass = this.selectedItemCssClass; 
                    } 
                } 
            } 

    Another option is creating a new instance of RadMenu control, bind it to SiteMapDataSource and use the following logic.

        protected void Page_Load(object sender, EventArgs e) 
        { 
            RadMenuItem currentItem = RadMenu1.FindItemByText("itemText"); 
            if (currentItem != null
            { 
                //Select the current item and his parents 
                currentItem.HighlightPath(); 
            } 
     
        } 


    Regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    29 May 2009
    Link to this post
    Hi there Ivan,

    I work with James and we're trying to figure out this solution, but I think you might be misunderstanding our requirement.

    When the user clicks on a menu and the page reloads then yes we want to keep the current menu highlighted as well as it's parent menu items.

    But, when you're on the browser side (client side) and you hover over a menu and it's submenus we also want to keep the parent and submenus highlighted (This is over and above the current menu item. This to me should be achieved client side. Your demos site has a few of these examples so it must be achievable, but none seem to show how you guys are doing it.

    Regards,
    Jacques

  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 May 2009
    Link to this post
    Hi Jacques,

    I am not sure whether you have given a try to the code samples I sent you. The parent item is selected on mouse hover and item click as well.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  11. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    13 Jun 2009
    Link to this post
    Hi Ivan,

    I think we might be misunderstanding each other here.

    We've got two distinct requirements:
    1. Keep the parent menu item highlighted when you navigate to any of it's child pages.
    2. Keep the parent menu item highlighted when you 'hover' over any of it's child menus.

    We have in fact implemented your sample code and it solves requirement 1 very nicely. But it doesn't do anything for option two and I fail to see how it can? The only way this could potentially happen is if this was being done with Ajax, but even then I would expect to see server side code for OnHover.

    Even from your sample, the one for which James provided the link, I cannot seem to figure out how that is being done.

    Regards,
    Jacques
  12. Jacques
    Jacques avatar
    427 posts
    Registered:
    28 Jun 2007
    13 Jun 2009
    Link to this post
    Hello again Ivan,

    Right, we seem to have found the answer and feel quite silly to have missed this all along.

    It seems that when the sub-menu is activated, javascript is injecting a new class name called rmExpanded into the parent menu. So putting together a class in the stylesheet for that class fixed our problem.

    Regards,
    Jacques
  13. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    13 Jun 2009
    Link to this post
    Hello J.Hov,

    I am glad to hear that you have solved the problem for your implementation. Let us know if we could assists with anything else.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  14. Paul
    Paul avatar
    4 posts
    Registered:
    26 Aug 2004
    29 Aug 2009
    Link to this post
    Hi Ivan,

    i'm attempting to get the selectedItem css going for my siteMenu and finding that its not allowing some style properties to work. For example is i use the code you suggested (like below) it changes the background to red, so the style is being used which is good.

    <style type="text/css">    
    .selectedItem    
    {    
     background-color: Red;    
    }    
        
    </style>    
     

    However, if i add different properties to the style (see below) eg format the actual text to another color. The color and text decoration properties don't seem to kick in and the menu stays like non selected items.

    <style type="text/css">    
    .selectedItem    
    {    
      text-decoration: underline;  
      color: Red;    
    }    
        
    </style>    
     

    I've also created a custom skin would their be a property in the skins css that overwrites the text style for selected item?
  15. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    31 Aug 2009
    Link to this post
    Hello Andrei Papay,

    You should write a more specific CSS rule. I suppose the one that you have written is overridden by others. The other options is to use !important rules like shown below.

    a.selectedItem:link, a.selectedItem:visited, a.selectedItem:hover, a.selectedItem:active 
    {     
      text-decoration: underline !important;   
      color: Red !important;     
    }     

    Let us know if you need further help.

    Sincerely yours,
    Katia
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  16. Paul
    Paul avatar
    4 posts
    Registered:
    26 Aug 2004
    01 Sep 2009
    Link to this post
    Hey Katia,

    i got it sorted.

    To get the text to change for the selected item the following css works perfectly with .rmText.

    .selectedItem .rmText {  
     color: #B7D433 !important;      
    }  
       

    thanks for your assistance.

     Andrei 
Register for webinar
16 posts, 0 answered