the graphic design blog that speaks the truth

Using the WordPress menu feature has made it fairly simple for developers to add advanced styling to their WordPress navigation menus.

It creates classes such as:

• current_page_item – To highlight the current page
• current_page_parent – To highlight the current pages parent
• current_page_ancestor – To highlight any ancestor of the current page

WordPress automatically adds these classes to the menus on your site, meaning styling these elements is a simple matter of adding some CSS.

There is one important class it has forgotten though.

A main functionality I find clients wanting is the ability to differentiate between top menu items that have drop-downs (sub items), and those that do not. In that, if you wanted to, lets say, add an arrow next to any menu items that had drop-downs in WordPress, there is no default way of doing so.

So how do we go about adding an arrow next to such items? It’s very simple by using just one line of Jquery:

$('ul.sub-menu').parent().addClass('dropdown-arrow');

WordPress automatically adds the class ‘sub-menu’ to any drop-down lists your WordPress menu contains. As such, the above code simply assigns a new class named ‘dropdown-arrow’ to the parent of these ‘sub-menu’ lists.

We now have a new css class to style!