Geek Answers Handbook

Highlight selected tab in ASP.Net menu

I am trying to highlight with a different color the selected tab in the ASP.NET menu. It seems to be easy to do, but at first I cannot get it to work, and secondly, I cannot yet find a good working example.

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; }
+4
source share
3 answers

This answer in ASP.NET: highlighting the menu item of the current page should provide a solution, re after.

Basically, you will need to use the Menu.StaticSelectedStyle Property . Here is an example in the answer link above and in the documentation.

Fragment Example

 <asp:menu [...]> <staticselectedstyle backcolor="LightBlue" borderstyle="Solid" bordercolor="Black" borderwidth="1"/> [...] </asp:menu>

In addition, you will need to remove the menu attribute IncludeStyleBlock="false" because it indicates whether ASP.NET should display a cascading style sheet (CSS) block for the styles that are used in the menu.

Other useful links:

+4
source

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 of elements 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>

Style sheet

 #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 }
+5
source

You need to install Selected MenuItem manually

 NavigationMenu.Items(i).Selected = True

I created a function to make selection easier.

 SelectMenuByValue("Value2", NavigationMenu)

The parameters are MenuItem and an instance of the Menu control.

 <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

link: from an ASP.NET 4 forum : highlight a menu item for the current page

+2
source

More articles:


All Articles