Search the blog

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:

        <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>
        <a href="/link-1.html">Link 3</a>
        <a href="/link-1.html">Link 4</a>

The jQuery:

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



Adapt to suit your needs!

Tim Bennett is a freelance web designer from Leeds. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.