WordPress drop down menus: highlight parent items with jQuery

It’s generally useful in sites with extensive drop down menus and many levels of hierarchy to highlight the parent item that encompasses the list of current items in the menu we’re now browsing so we can keep track of where we are. In this tutorial we will learn how to use jQuery to achieve this in WordPress menus, but it can be applied to any menu that has a similar markup.

Markup

Despite the fact that we will be using the markup of menus generated by WordPress to highlight the parents items, this is a general technique that can be used in any drop down menu, as long as it has the ul > li > a + ul format.

This is a sample —with some classes removed for the sake of brevity— of the markup generated by WordPress when you use the wp_nav_menu function.

<div id="navigation">
    <ul class="menu">
        <li class="menu-item">
            <a href="#" class="has-submenu">Link 1</a>
            <ul class="sub-menu">
                <li class="menu-item">
                    <a href="https://atomic-temporary-176953424.wpcomstaging.com">Link 2</a>
                </li>
                <li class="menu-item has-submenu">
                    <a href="#">Icons</a>
                    <ul class="sub-menu"><br />
                        <li class="menu-item">
                            <a href="https://atomic-temporary-176953424.wpcomstaging.com" class="has-submenu">Link 3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Notice you can use dummy anchors using the # instead of a full URL and they will behave like any other menu item.

Creating the interaction

Although the jQuery code is quite short, it has its own complexities. We will collect the parents of the current list we’re browsing and, following the Object Oriented CSS trend, we will add a single class that is the “skin” of the element to the anchors to each parent.

/**
* Highlights parents from children items in sub menus
* https://atomic-temporary-176953424.wpcomstaging.com
*/
jQuery(document).ready(function($) {
    $('#navigation ul ul')
        .mouseenter(
            function() {
                $(this).parents('li').each(function(){
                    $(this).children('a').addClass('highlight');
                });
            })
        .mouseleave(
            function() {
                $(this).parent('li').each(function(){
                    $(this).children('a').removeClass('highlight');
                });
            }
        );
});

Note that for more efficiency we’re beginning from the second level of menus, that is, the first level of drop downs, because the first level will be highlighted using regular CSS with the :hover pseudo selector.
The mouseenter and mouseleave events are also used because they don’t bubble the event up from the child to the parent. Also notice that in the mouseenter event, we highlight all the parents of the current list of items, but in the mouseleave, we only remove the highlight for the immediate parent since otherwise we would remove the highlight up until the first parent thus nulling our tracking system.

Closing words

Finally, here’s the Demo for Highlight Parent Menu Items so you can have a play with it. The code is released under the GPL v2 license so you can incorporate into your WordPress themes should you need. This solution has been tested in IE 7, 8 as well as modern browsers.