On click of menu it will highlight root menu too.

4 posts, 0 answers
  1. Mugdha Aditya
    Mugdha Aditya avatar
    71 posts
    Member since:
    Mar 2010

    Posted 25 Jul 2011 Link to this post

    I have radmenu bar in which i want to highlight or backcolor change of root menu in CSS.

    below is my code and css.

     <telerik:RadMenu ID="RadHistorickMenu" Skin="MenuSkin" runat="server" EnableEmbeddedSkins="false" OnClientItemClicking="OnClientItemClicking"
                                EnableRoundedCorners="true" EnableShadows="true" Width="100%" OnItemClick="RadHistorickMenu_ItemClick"> 
                                <Items>
                                    <telerik:RadMenuItem Text="Quarterly" >
                                        <Items>
                                            <telerik:RadMenuItem Text="I S"/>
                                            <telerik:RadMenuItem Text="O D"  />
                                        </Items>
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Annual" >
                                        <Items>
                                            <telerik:RadMenuItem Text="I S"  />
                                            <telerik:RadMenuItem Text="O D"  />
                                        </Items>
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenu>

    My CSS is below.

     

    /* <RadMenu / Black> */
      
    .RadMenu_MenuSkin .rmRootGroup,
    .RadMenu_MenuSkin a.rmLink,
    .RadMenu_MenuSkin .rmText
    {
        background-color: transparent
    }
      
    .RadMenu_MenuSkin .rmRootGroup
    {
        background-repeat: repeat-x;
        background-color: #717171;
    }
       
      
    .RadMenu_MenuSkin .rmVertical
    {
        background-position: 0 -408px;
    }
      
    /* <Root items> */
      
    .RadMenu_MenuSkin,
    .RadMenu_MenuSkin a.rmLink
    {
        font: normal 12px/23px "Segoe UI", Arial, sans-serif;
        color: #ffffff;
        text-decoration: none;
    }
      
    .RadMenu_MenuSkin a.rmLink,
    .RadMenu_MenuSkin .rmText
    {
        background-repeat: no-repeat;
        background-position: 0 500px;
    }
      
    .RadMenu_MenuSkin a.rmLink:hover,
    .RadMenu_MenuSkin a.rmFocused,
    .RadMenu_MenuSkin a.rmSelected
    {
        background-position: 0 -72px;
        background-color : #dcdcdc; /* Selected menu*/
        color : #28638f;
        font-weight:bold;
    }
      
    .RadMenu_MenuSkin .rmLast a.rmExpanded .rmText
    {
        background-position: 0 500px;
        background-repeat: no-repeat;
    }
      
    .RadMenu_MenuSkin a.rmDisabled,
    .RadMenu_MenuSkin a.rmDisabled:hover
    {
        color: #7d7d7d;
        background-position: 0 500px;
    }
      
    /* </Root items> */
      
    .RadMenu_MenuSkin .rmVertical .rmLink,
    .RadMenu_MenuSkin .rmHorizontal .rmLink
    {
        margin-right: 5px; /* Distance between menu items*/
    }
      
    /* <Submenu items> */
      
    .RadMenu_MenuSkin .rmGroup,
    .RadMenu_MenuSkin .rmMultiColumn,
    .RadMenu_MenuSkin .rmGroup .rmVertical
    {
        border: 1px solid #080808;
    }
      
    .RadMenu_MenuSkin .rmTopFix,
    .RadMenu_MenuSkin .rmBottomFix,
    .RadMenu_MenuSkin .rmRoundedCorners .rmGroup .rmItem,
    .RadMenu_MenuSkin .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
    .RadMenu_MenuSkin .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,
    .RadMenu_MenuSkin .rmRoundedCorners ul.rmHorizontal .rmFirst,
    .RadMenu_MenuSkin_Context.rmRoundedCorners .rmGroup .rmItem,
    .RadMenu_MenuSkin_Context.rmRoundedCorners ul.rmHorizontal .rmFirst
    {
        background-color: #717171
        background-repeat: repeat-y;
    }
      
    * html .rmRoundedCorners_MenuSkin .rmGroup .rmItem,
    * html .rmRoundedCorners_MenuSkin ul.rmHorizontal .rmFirst
    {
        background-color: #717171
        background-repeat: repeat-y;
    }
      
      
    .RadMenu_MenuSkin .rmRoundedCorners .rmGroupColumn
    {
        background-color: #717171;
    }
      
    .RadMenu_MenuSkin .rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
    .RadMenu_MenuSkin .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix,
    .RadMenu_MenuSkin_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
    .RadMenu_MenuSkin_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix
    {
        background: #717171;
    }
      
    * html .rmRoundedCorners_MenuSkin .rmScrollWrapContainer .rmTopFix,
    * html .rmRoundedCorners_MenuSkin .rmScrollWrapContainer .rmBottomFix
    {
        background: #717171;
    }

    i mean on click of IS or OD, it will change back color or css of Quarterly / Annual (root menu) in css.
    can any one help me with this?
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 27 Jul 2011 Link to this post

    Hi Mugdha Aditya,

    Here is an example how you can change the text color of a menuItem when using the client-side OnClientItemClicking event. In the event handler I get the clicked item and apply it the new1 css class. Following this example you could apply the different styles and color to the needed menuItems.
    <style type="text/css">
            .new1, .new1 a.rmLink
            {
                color: red !important;
            }
        </style>

    <script type="text/javascript">
            function itemClicked(sender, args) {
                args.get_item().set_cssClass("new1");
            }      
        </script>

    markup:
    <telerik:RadMenu runat="server" ID="Menu1" OnClientItemClicking="itemClicked">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Root 1">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root 2">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root 3">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root 4">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>

    For further reference on the client-side basics and the different css class selectors you can take a look at our on-line documentation here:

    All the best,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Mugdha Aditya
    Mugdha Aditya avatar
    71 posts
    Member since:
    Mar 2010

    Posted 10 Aug 2011 Link to this post

    its not working..it changes selected child color.
    i want to changes selected child root menu color.
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 15 Aug 2011 Link to this post

    Hi Mugdha,

    In case you need to highlight both the root menu item and the selected child I would suggest that you use the approach that is described in this demo. Considering the example that I gave you in the previous post it only shows how you can apply a css class to the selected child menu item by using the OnClientItemClicking event. In case you need to change any other color you will need to get the right css selector and assign a css class to the desired menu item (you can find the item by using javascript). 

    Regards,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top