On click of menu it will highlight root menu too.

[Mugdha Aditya]

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?

[Kate]

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:

• Client-Side Basics
• CSS Skin File Selectors

All the best,
Kate
the Telerik team

[Mugdha Aditya]

its not working..it changes selected child color.
i want to changes selected child root menu color.

[Kate]

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