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.
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?
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?