Implementation code
Get a zip with all the sample HTML and any spaecial CSS or JS needed:
Download a ZIP file
More on how to use this
<header id="masthead" class="masthead">
<div class="masthead-inner row">
<div class="columns medium-12" id="local-title">
<h1><a href="../../" title="Back to [service-name] homepage">Detect active menu item</a></h1>
</div>
<nav>
<ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
<li><a href="/">Current page (relative)</a></li>
<li><a href="/some-other-page">Not current page</a></li>
</ul>
</nav>
</div>
</header>
function setNavigation() {
var path = window.location.pathname;
console.log('current path:', path)
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$("#local-nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}
$(function () {
setNavigation();
});