css sprites in wordpress

I have created a sprite menu with 5 levels. 1st level contains "HOME" and etc., along with "SIGNUP" and "LOGIN". 2nd level is when the 1st level is hovered. 3rd level is when active. 4th level is similar however 开发者_如何学运维it has "My ACCOUNT" & "LOGOUT" instead and the 5th level is just hovered of "My ACCOUNT" & "LOGOUT". How would I tell wordpress to use the 4rd if the user is logged in and 5th level if they click/hover over "My Account" & "Logout". I'm using the latest release of Wordpress.

I would use the sprite as the menu/buttons background, and give the various levels different css classes.

So for the 5th level you can use the :hover class. For the 4th level you can use wordpress's if user is logged in function to give things different classes -so something like

<?php if ( is_user_logged_in() ) {  ?>
<div class="my-button class-5"></div>
<?php } else { ?>
<div class="my-button class-4"></div>
<?php }; ?>

where 'class-4' has the background set to your 4th level sprite and 'class-5' has the background set to your 5th level sprite.

Working with CSS sprites in a menu with each item being an image of its own ("Home", "About....") is a very bad idea.

• It's poison for accessibility
• It may be harmful for SEO
• It's a lot of work to maintain the sprite images
• Menu items won't scale when the user uses their browser's "zoom" function
• Users with images turned off have no way of seeing what the menu item says

It's hard to give an alternative suggestion without seeing the intended design, but the most common way is probably to build a <ul> based navigation (each item being a <li>) and giving each element a background image. Depending on your situation, you may be able to work with CSS sprites there to show the hovered and unhovered states.