This is a migrated thread and some comments may be shown as answers.
On click of menu it will highlight root menu too.
3 Answers 70 Views
This is a migrated thread and some comments may be shown as answers.
Mugdha Aditya
Top achievements
Rank 1
Mugdha Aditya asked on 25 Jul 2011, 07:32 AM
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?

3 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 27 Jul 2011, 04:09 PM
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.

0
Mugdha Aditya
Top achievements
Rank 1
answered on 10 Aug 2011, 08:04 AM
its not working..it changes selected child color.
i want to changes selected child root menu color.
0
Kate
Telerik team
answered on 15 Aug 2011, 01:00 PM
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.

Tags
Menu
Asked by
Mugdha Aditya
Top achievements
Rank 1
Answers by
Kate
Telerik team
Mugdha Aditya
Top achievements
Rank 1
Share this question
or