Use jQuery to add an active class to a menu

On a website you will typically have a menu and often a drop down — or second level of pages. It is helpful to the user to style these slightly differently so the user knows where they are on the site.

The following jQuery code just does that. Assuming the following markup, the jQuery code below will add a CSS class to “active” links.

The markup:

<header>
    <nav>
        <a href="/link-1.html">Link 1</a>
        <span class="drop-down">
            <a href="/link-2.html">Link 2</a>
            <span class="child">
                <a href="/folder/link-1.html">Link 1</a>
                <a href="/folder/link-2.html">Link 2</a>
                <a href="/folder/link-1.html">Link 3</a>
                <a href="/folder/link-1.html">Link 4</a>
            </span>
        </span>
        <a href="/link-1.html">Link 3</a>
        <a href="/link-1.html">Link 4</a>
    </nav>
</header>

The jQuery:

var $nav = $('header nav');
$nav.find('a[href="' + $.escapeSelector(window.location.pathname) + '"]').addClass('active');
$nav.find('span.drop-down span.child a.active').each(function() {

    $(this).closest('span.drop-down')
           .children('a')
           .addClass('active');

});

Adapt to suit your needs!