How to highlight the active page in the main page menu?

Question

I have a menu inside the masterpage (on an ASP.NET website) and I want to highlight the active page in the main menu and submenu.

HTML:

 <ul id="nav" class="sf-menu"> <li class="current-menu-item"><a href="index.html">Home</a></li> <li><a href="page.html">menu-2</a> <ul> <li><a href="page-full.html">full</a></li> <li><a href="page-features.html">featurs</a></li> <li><a href="page-typography.html">typography</a></li> </ul> </li> </ul> 

CSS

 #nav>li.current-menu-item>a, #nav>li.current_page_item>a{ color: #fe8300; } 

early.

Answer 1

Finally, I solved the problem using jQuery :

  var str=location.href.toLowerCase(); $("#nav li a").each(function() { if (str.indexOf($(this).attr("href").toLowerCase()) > -1) { $("li.current-menu-item").removeClass("current-menu-item"); $(this).parent().addClass("current-menu-item"); } }); $("li.current-menu-item").parents().each(function(){ if ($(this).is("li")){ $(this).addClass("current-menu-item"); } }); 

Answer 2

There are many ways to do this. There are a few simple and ugly hackers:

Solution 1: Use the menu control. The standard .NET control has a simple solution for this. In my opinion, this is the cleanest and fastest solution. Check out this post. Maby this will help you if you choose this solution.

Solution 2: You can use some kind of javascript to highlight the current element. jQuery will make this easier if you don't want to write everything yourself. For this solution, consider this page . It is outdated, but still effective.

Solution 3: This is a kind of ugly solution, and you can do it differently: you can change the <a> elements to HyperLink controls and set some kind of session or cookie when you click on them. During installation, you can change the style based on the value that the cookie has.

There are even more ways to solve this problem, but I think the first two solutions will help you.

Answer 3

check your URL and get the html file name, then compare it and set the css class on the main page or make the UserControl menu separately and then place it on the main page.

You must change your anchor tag to hyperlinks

Asp.net markup:

 <li><asp:HyperLink runat="server" ID="lnk_full" NavigateUrl="page-full.html" Text="full" /></li> <li><asp:HyperLink runat="server" ID="lnk_features" NavigateUrl="page-features.html" Text="features" /></li> <li><asp:HyperLink runat="server" ID="lnk_typography" NavigateUrl="page-typography.html" Text="typography" /></li> 

Codebehind:

 protected void SelectMenu() { try { string page = Path.GetFileNameWithoutExtension(Request.AppRelativeCurrentExecutionFilePath); string pageDirectory = Path.GetDirectoryName(Request.AppRelativeCurrentExecutionFilePath); string category = Request.QueryString.Count>0 ? Request.QueryString[0] : string.Empty; if (pageDirectory.Length > 3) { pageDirectory = pageDirectory.Substring(2, pageDirectory.Length - 2); } if (pageDirectory != null && pageDirectory.Length > 0 && page != null && page.Length > 0) { switch (pageDirectory) { case "Secure\\Clients": switch (page) { case "page-full": lnk_full.CssClass = "current-menu-item"; break; case "page-features": lnk_features.CssClass = "current-menu-item"; break; case "page-typography": lnk_typography.CssClass = "current-menu-item"; break; } break; } } } catch (Exception ex) { throw ex; } } 

If your web pages are in the root directory, then do not switch to pageDirectory . and if you use querystrings, you can switch to category . Hope this helps you.

Answer 4

 $(function () { $(".navbar‐btn a").each(function () { var hreff = this.href.trim().split("/").splice(3, 4); if (hreff.length > 1) hreff.splice(0, 1); if (hreff[0] == window.location.pathname.split("/").splice(1, 1)[0]) $(this).parent().addClass("active"); }); }) 

Answer 5

This works well for me during development and locally, but when I host it on IIS, the active highlighting in the menu does not work. What am I missing here? Master page code below

 $(document).ready(function () { //You can name this function anything you like function activePage() { //When user lands on your website location.pathname is equal to "/" and in //that case it will add "active" class to all links //Therefore we are going to remove first character "/" from the pathname var currentPage = location.pathname; var slicedCurrentPage = currentPage.slice(1); //This will add active class to link for current page $('.nav-link').removeClass('active'); $('a[href*="' + location.pathname + '"]').closest('li').addClass('active'); //This will add active class to link for index page when user lands on your website if (location.pathname == "/") { $('a[href*="index"]').closest('li').addClass('active'); } } //Invoke function activePage(); }); 

Answer 6

 jQuery(document).ready(function() { var str = location.href.toLowerCase(); jQuery('#topnav li a[href=\'' + str + '\']').addClass('active'); });