The RadMenu is ignoring the SelectedCssClass property when using ItemTemplates. It is correctly applied if ItemTemplates are not used.
CSS:
Markup:
Codebehind (VB) with work-around:
CSS:
.TabFormat |
{ |
height:50px !important; |
background-color:#263144 !important; |
padding:0px; |
} |
.TabFormat:hover |
{ |
background-color:#212631 !important; |
color:#f78f1e; |
} |
.TabSelected |
{ |
background-color:#212631 !important; |
color:#f78f1e !important; |
} |
.NavMenuItem |
{ |
width:150px; |
height:50px; |
} |
.NavMenuItem a, a:hover, a:active |
{ |
cursor:default; |
text-decoration:none; |
color:#f78f1e; |
} |
.NavMenuTitle |
{ |
font-size:12pt; |
padding:5px 0px 5px 15px; |
} |
.NavMenuSubTitle |
{ |
padding-left:15px; |
font-size:8pt; |
} |
Markup:
<telerik:RadMenuItem IsSeparator="true" /> |
<telerik:RadMenuItem runat="server" |
Text="how it works" |
CssClass="TabFormat" |
SelectedCssClass="TabSelected" |
NavigateUrl="~/HowItWorks.aspx" |
> |
<ItemTemplate> |
<a href="../HowItWorks.aspx"> |
<div class="NavMenuItem"> |
<div class="NavMenuTitle"> |
How it works |
</div> |
<div class="NavMenuSubTitle"> |
we'll show you |
</div> |
</div> |
</a> |
</ItemTemplate> |
</telerik:RadMenuItem> |
Codebehind (VB) with work-around:
Dim currentItem As RadMenuItem |
If Request.Url.PathAndQuery.Contains("/products/") Then |
currentItem = RadMenu1.FindItemByText("products") |
Else |
currentItem = RadMenu1.FindItemByUrl(Request.Url.PathAndQuery) |
End If |
If Not IsNothing(currentItem) Then |
currentItem.Selected = True |
' NOTE: This is a workaround to a bug in the RadMenu that fails to apply the "selectedCSS" |
' when using Templates. |
currentItem.CssClass = "TabSelected" |
End If |