I've produced a sprite menu with 5 levels. first level consists of "HOME" and etc., together with "Register" and "LOGIN". second level happens when the first level is hovered. 3rd level happens when active. fourth level is comparable nevertheless it has "My ACCOUNT" &lifier "LOGOUT" rather and also the fifth level is simply hovered of "My ACCOUNT" &lifier "LOGOUT". Wouldso would I tell wordpress to make use of the 4rd when the user is drenched in and fifth level when they click/hover over "My Account" &lifier "Logout". I am while using latest discharge of Wordpress.

I'd make use of the sprite because the menu/buttons background, and provide the different levels different css classes.

So for that fifth level you should use the :hover class. For that fourth level you should use wordpress's if user is drenched in function to provide things different classes -so something similar to

<?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 got the background set for your fourth level sprite and 'class-5' has got the background set for your fifth level sprite.

Dealing with CSS sprites inside a menu with every item becoming an picture of its very own ("Home", "About....") is an extremely bad idea.

  • It's poison for ease of access
  • It might be dangerous for Search engine optimization
  • It's lots of try to keep up with the sprite images
  • Menu products will not scale once the user uses their browser's "zoom" function
  • Customers with images switched off don't have any method of seeing exactly what the food selection states

It's difficult to provide an alternate suggestion without seeing the intended design, but the most typical strategy is most likely to construct a <ul> based navigation (the items as being a <li>) and giving each element experience image. Based on your circumstances, you might have the ability to use CSS sprites there to exhibit the hovered and unhovered states.