A Happy Primary Menu Is An Active Primary Menu

I was hard at work on a recent website when I came across an interesting issue, you see I wanted to use a primary menu at the top as main navigation for the website. No dropdowns or anything fancy, just a smooth top horizontal navigation bar.

Additionally, I have a different menu (could one of several options) displayed along the right side based on the content being shown. Now I want my primary menu to display as 'active' when I am somewhere deep within the site on a page that the primary menu has no idea about. So, I want my primary navigation menu item to be active, even tho it has no idea what page I am on.

Let me paint a picture for you...

The primary navigation would be Games, Books, DVD's across the top.
The menu (not sub menu of primary navigation, but a sperate menu) for Books would include Writers, Covers, Fiction, Non-Fiction.
The menu for Games would include PSP, DS, Xbox.
and so on

More example...

When a user is on a page/node/view that pertains to a Book, the right side menu would be the 'Books Menu Block'. By using what drupal gives you within blocks (visibility settings), you can display the block when a provided url is present. So //sitename.com/books/cool-list, and //sitename.com/books/scary would enable drupal to show the 'Books Menu Block'. You can standardize your urls with pathauto, and use a good naming convention for your views and panels to accomplish this task. You can imagine that the same process can be build for the other types of content and their corresponding menus.

Are you still with me... good...

My problem was to figure out how to keep the primary menu link "active" when I was displaying content that was related to that link. There are probably a dozen ways to do it, but I really wanted to try some jQuery, and I really wanted to keep it simple. So here is what I decided to do.

I am good enough with jQuery and css that I decided to use the id and class selectors.
I created the above functionality for my menus, so when ever content was being displayed the menu was going to be associated with the url.
So, my goal was to get to the primary menu, by way of the menu being displayed on the right.

I checked to see if the menu was present using the menu's ID.

$('#this-is-the-css-id-of-the-block')[0])

If the menu was present I wanted to add a class of 'active' to the appropriate primary navigation.

$('li.class-name a').addClass('active')

$('li.class-name').addClass('active')

Then use as many if statements as I needed to accomplish my task. My final jQuery looked something like this...

$(document).ready(function() {
if ($('#block-menu-menu-one')[0]) {
$('li.menu-111 a').addClass('active');
$('li.menu-111').addClass('active');
}
if ($('#block-menu-menu-two')[0]) {
$('li.menu-112 a').addClass('active');
$('li.menu-112').addClass('active');
}
if ($('#block-menu-menu-three')[0]) {
$('li.menu-113 a').addClass('active');
$('li.menu-113').addClass('active');
}
if ($('#block-menu-menu-four')[0]) {
$('li.menu-114 a').addClass('active');
$('li.menu-114').addClass('active');
}
});

There are probably some better ways to write this, but for my current jQuery skills I was happy with the results. If you need some ideas about creating some custom li classes you can always look at the first blogthingee post.