Reputation: 5249
I am trying to hightlight with different color the selected tab in ASP.NET menu. It seems simple to do this but first I am not able to make it to work, and second I cannot find a good working example so far.
ASP/HTML
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="False"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/ReadMe.aspx" Text="Read Me" />
<asp:MenuItem NavigateUrl="~/Summary.aspx" Text="Summary" />
<asp:MenuItem NavigateUrl="~/Detail.aspx" Text="Detail" />
</Items>
</asp:Menu>
</div>
CSS
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
Upvotes: 4
Views: 19037
Reputation: 1938
This is a Working solution: *Script*
<script language="javascript" type="text/javascript">
$(function () {
// this will get the full URL at the address bar
var url = window.location.href;
// passes on every "a" tag
$("#cssmenu a").each(function () {
// checks if its the same on the address bar
if (url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
$("#header a").each(function () {
// checks if its the same on the address bar
if (url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});
</script>
Markup
List items with div id ="cssmenu"
<div id='cssmenu'>
<ul>
<li><a href="../Admin/dashboard.aspx"><span>Dashboard</span></a></li>
<li><a href="../Admin/Report.aspx"><span>Reports</span></a></li>
<li><a href="../Admin/Shop.aspx"><span>Shop</span></a></li>
<li><a href="../Admin/system.aspx"><span>System</span></a></li>
</ul>
</div>
StyleSheet
#cssmenu ul {
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 33px;
font-size: .6em;
background: url(images/bg.png) repeat-x top left;
font-family: Verdana,Helvetica,Arial,sans-serif;
border: 1px solid #000;
margin: 0;
padding: 0;
}
#cssmenu li {
display: block;
float: left;
margin: 0;
padding: 0;
}
#cssmenu li a {
float: left;
color: #A79787;
text-decoration: none;
height: 24px;
padding: 9px 15px 0;
font-weight: normal;
}
#cssmenu li a:hover,
#cssmenu .active {
color: #fff;
background: url(images/bg.png) repeat-x top left;
text-decoration: none;
}
#cssmenu .active a {
color: #fff;
font-weight: 700;
}
#cssmenu ul { background-color: #629600 }
#cssmenu li a:hover,
#cssmenu li.active { background-color: #7AB900 }
Upvotes: 5
Reputation: 4921
You need to set the Selected MenuItem Manually
NavigationMenu.Items(i).Selected = True
I've created a function to make highlighting easier.
SelectMenuByValue("Value2", NavigationMenu)
It takes the Value of the MenuItem and the Menu control instance as Parameters.
<asp:Menu ID="NavigationMenu" runat="server">
<Items>
<asp:MenuItem Text="Parent1" Value="ParentValue">
<asp:MenuItem Text="SubMenu1" Value="Value1" NavigateUrl="~/Page1.aspx" />
<asp:MenuItem Text="SubMenu2" Value="Value2" NavigateUrl="~/Page2.aspx" />
<asp:MenuItem Text="SubMenu3" Value="Value3" NavigateUrl="~/Page3.aspx" />
</asp:MenuItem>
</Items>
Code behind:
Public Sub SelectMenuByValue(ByVal sValue As String, ByVal NavigationMenu As Menu)
Dim iMenuCount As Integer = NavigationMenu.Items.Count - 1
For i As Integer = 0 To iMenuCount
Dim menuItem As MenuItem = NavigationMenu.Items(i)
If menuItem.Value = sValue Then
If menuItem.Enabled AndAlso menuItem.Selectable Then menuItem.Selected = True
Exit For
End If
If CheckSelectSubMenu(menuItem, sValue) Then Exit For
Next
End Sub
Private Function CheckSelectSubMenu(ByVal menuItem As MenuItem, ByVal sValue As String) As Boolean
CheckSelectSubMenu = False
Dim iMenuCount As Integer = menuItem.ChildItems.Count - 1
For i As Integer = 0 To iMenuCount
Dim subMenuItem As MenuItem = menuItem.ChildItems(i)
If subMenuItem.Value = sValue Then
CheckSelectSubMenu = True
If subMenuItem.Enabled AndAlso subMenuItem.Selectable Then subMenuItem.Selected = True
Exit For
End If
If CheckSelectSubMenu(subMenuItem, sValue) Then
CheckSelectSubMenu = True
Exit For
End If
Next
End Function
reference: from the forum ASP.NET 4 : Highlight menu item for current page
Upvotes: 2
Reputation: 21101
This answer to ASP.NET: Highlight menu item of current page should provide the solution you're after.
Basically, you'll need to use the Menu.StaticSelectedStyle Property. There's an example in the answer link above and in the documentation.
Example Snippet
<asp:menu [...]>
<staticselectedstyle backcolor="LightBlue"
borderstyle="Solid"
bordercolor="Black"
borderwidth="1"/>
[...]
</asp:menu>
Also, you will need to remove the menu
attribute IncludeStyleBlock="false"
as it " indicates whether ASP.NET should render a block of cascading style sheet (CSS) definitions for the styles that are used in the menu."
Other helpful links:
Upvotes: 4