Reputation: 43
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.
Upvotes: 0
Views: 533
Reputation: 449385
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 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.
Upvotes: 1
Reputation: 538
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.
Upvotes: 1