Need assistance w/ dynamic highlighting an image-sprite navigation menu in wordpress

I have an image based menu on a wordpress site Im building that Id like to be able to dynamically highlight for each section & more importantly开发者_StackOverflow中文版 highlight while each visitor is viewing a child page or post within its respective page.

I've sorted out how to get each section to highlight just fine when viewing that parent page, however Ive run into some trouble with achieving the same effect when I choose to view a post or subpage.

Since Im utilizing categories to filter content to specific pages I was able to get each section to still highlight when viewing a post by using: <?php if ( is_page('page-name') || is_category('cat-name') || in_category('cat-name')) { echo ' class="xxxx_highlight" '; } ?> yet this also caused a few problems as well unfortunately....What happened was, as soon as there was content posted to both the BLOG & MEDIA section - both sections would highlight simultaneously which is obviously not what were going for here. Couldn't really figure out why that occurred however so I removed the in_category() & is_category()...

Ive been looking through the conditional tags section up and down for the last couple weeks with no avail as to what additional tags are at my disposal in order to achieve this with a sprite menu. What would be ideal rather then targeting "categories" would be if there were a tag to simply look for if a single.php page & subpage of a parent in the menu was in use...couldn't really find anything that worked however so Im hoping some php/wordpress guru can point in the right direction hopefully!

Here is my current markup:

HTML MENU

<ul id="nav">
    <li>
        <a href="/" id="logo"></a>
    </li>
    <li>
        <a href="/" id="home" <?php if ( is_front_page('events')) { echo ' class="home_highlight" '; } ?>></a><!-- HOME -->
    </li>
    <li>
        <a href="/artists" id="artists" <?php if ( is_page('artists')) { echo ' class="artists_highlight" '; } ?>></a><!-- ARTISTS -->
    </li>
    <li>
        <a href="/media" id="media" <?php if ( is_page('media')) { echo ' class="media_highlight" '; } ?>></a><!-- MEDIA -->
    </li>
    <li>
        <a href="/blog" id="blog" <?php if ( is_home('blog')) { echo ' class="blog_highlight" '; } ?>></a><!-- BLOG -->
    </li>
    <li>
        <a href="/store" id="store" <?php if ( is_page('store')) { echo ' class="store_highlight" '; } ?>></a><!-- STORE -->
    </li>
    <li>
        <a href="/contact" id="contact" <?php if ( is_page('contact')) { echo ' class="contact_highlight" '; } ?>></a><!-- CONTACT -->
    </li>
</ul>

---

What I suggest to you is use echo in "ul", something like

<ul id="nav" class="<?php echo $post->ID; ?>">
..... li's and a's here

So via CSS you just do

.N #home, .M #artists, .X #media { [active styling] } /* where N is home ID, M is artists ID, X is media ID and so on */

So, when you are in page that gives ul class "N" you know that #home will be active. When you are in "M" you know that artists is active.

PS: You could even use a custom field like "classname" for a better menu control..

---

Just in case someone else possibly runs into the same issue I had here, Ive finally found a solution on my own after several hours of sifting through the wordpress codex...

Turns out the answer to this problem is far easier then I would have imagined. All you need to do is take advantage of wordpresses own <?php body_class($class); ?> tag...Once youve coded this in, go to firebug and inspect the outputted classes that the tag generates depending on what page your at. So now at this point its very easy to use the generated classes (the page-template-xxxx class in particular) and target that class via CSS to highlight what you need in the oldschool way you would with a static site.

Hope that helps out anybody else with the same dilemma I had!