Comments on: Building Dynamic Navigation Using JavaScript and jQuery

By: Dan

Dan — Sun, 11 Jul 2010 12:38:32 +0000

Excellent! Exactly what I needed to add a current page class to a dynamically created UL to get an accordion menu working. I didn’t require as much code as you used and needed the whole URL as oppose to the path name so adapted the code to suit. Good explanation.

$(document).ready(function() {
$(“ul.nav_cat_archive li”).find(“a[href='"+window.location.href+"']“).each(function() {
$(this).addClass(“current_page”);
});
});

Thanks

By: Chris LeCompte

Chris LeCompte — Wed, 26 Aug 2009 13:51:00 +0000

Glad it worked for you Rick! jQuery has really motivated me to finally jump into the programming world (well, actually, I’m just dipping my toes into the water)..so I’ll keep at it and let you know if I find any better solutions.

By: Rick Hocutt

Rick Hocutt — Thu, 20 Aug 2009 21:02:41 +0000

This is great, works like a charm! I needed to alter it to remove the active class on sub menu items in the “services” directory in a drop down menu that uses nested lists. I then added the class back to the nested lit item when a user is on a specific page in that directory. I ended up using this to solve this:

var services = "services"; var url = services; var siteurl; var locmatch;


url = url.split(/[\s\,]+/i);

siteurl = String(location.href);

for (var x = 0; x < url.length; x++) {

  locmatch = siteurl.match(url[ x ]);

}
$(document).ready(function(){

  if (locmatch == services) {

    $("#nav li a[href*='services']").addClass("active");

	$("#nav li ul li a").removeClass("active");

$("#nav li").find("a[href='"+window.location.pathname+"']").each(function(){ $(this).addClass("active") }); } else { $("#nav li").find("a[href='"+window.location.pathname+"']").each(function(){ $(this).addClass("active") }); }; });

I’m like you Chris I’m not the best programmer so there’s probably a better way of achieving this effect. Let me know if you know of one. At any rate it seems to do the job.

Thanks!