jQuery, Drupal and Navigation

jQuery's an amazing tool. You can accomplish great things with a single line of JavaScript. Here is one such snippet from a site I am working on for Bradley University. You can use this snippet to improve your navigation's usability.

Well-designed web navigation should tell you three things:

1. Where you are
2. Where you came from
3. Where you can go from here

Depending on the theme you choose, Drupal does a decent to good job of highlighting the active menu trail for you so that you can add in an extra graphical effect. Most themes do so by adding the .active CSS class.

There are some snippets out there that can assist you in making your theme friendlier in this regard: many of them involve adding a custom theme_links() function.

At the end of the day, though, there's still some things that could be done better. I subscribe to the school of thought that says that active menu items should not be clickable. After all, if you have a custom .active CSS class, you can style the active menu item to show the user where they are. You should not give the user the ability to click the Home link if they're already on the home page.

So I set about to find a quick way to disable these active menu items. I already had a layout built based on my navigation being a <a> tags, so I didn't particularly want to eliminate them all together.

I came up with a quick jQuery way to take care of this problem for me. I had considered a few options: I could iterate through all my <a> tags and get set their click handlers to return false. That worked fine but was even less intuitive because the active menu item would now make a pointer cursor appear, and it was clickable, but it did nothing.

I finally settled on a solution that I think works well. I put the following statement in my $(document).ready() function.

$("#navigation li.active a").removeAttr("href");

This does two things - it disables the active menu link, but the active item is still ultimately an <a> tag, and so all styling (provided that you're not depending on a:link styles) remains intact without any extra action required on your part.

Now this isn't perfect, since it's client-side, so it won't work for those without JavaScript, or on mobile phones. Nonetheless, it's a testament to jQuery's power - a simple one-liner gets you enhanced usability for nearly all your visitors.