How to highlight active page in a masterpage menu? - html

Question

I have a menu inside a masterpage (in a ASP.NET Web site), and i want to highlight active page in masterpage menu and submenus.
HTML:
<ul id="nav" class="sf-menu">
<li class="current-menu-item">Home</li>
<li>menu-2
<ul>
<li>full</li>
<li>featurs</li>
<li>typography</li>
</ul>
</li>
</ul>
CSS:
#nav>li.current-menu-item>a,
#nav>li.current_page_item>a{
color: #fe8300;
}
thanks in advance.

Answer 1

finally i solved my problem with 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 some easy and some ugly hacky ones:
Solution 1:
Use a Menu Control. The standard .NET Menu Control has an easy solution to do this. This is the cleanest and fastest solution in my opinion. Have a look at this post. Maby it'll help you if you choose this solution.
Solution 2:
You coud use some sort of javascript to highlight the current item. jQuery would make that easier if you dont want to write everything by yourself. For this solution have a look at this page. It's outdated but still effective.
Solution 3:
This is kinda ugly solution and you can do that in many different ways: You could change the <a> elements to HyperLink controls and set some sort of session or cookie when you click on them. When set you could change the style based on the value the cookie has.
There are even more ways you could solve this 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 your css class in master page or make a menu UserControl seperate and then put it on master page.
You have to 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 webpages are in root directory then don't switch for pageDirectory. and if you are using querystrings then you can switch for category. Hope this is 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 fine for me during development and in local, but when I host it on IIS the active highlighting on the menu does not work. What am I missing here?
Masterpage 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');
});