Using a variation of the CSS Sprites technique, we can create a “three state” menu using only one image per menu item. This reduces the number of requests on your server as well as eliminates any “pauses” while moving to a different state like some other techniques can have. This tutorial takes you all the way through the process of creating the images to the HTML to the CSS.
Links from video:
always wanted to learn this :)
When you do the “canvas resize” on photoshop, you can use the “percent” (%) option (i.e. 300% in you case), than drag the other imagens in that. (sorry about my english)
nice little tip
Pretty neat! What about WordPress? How do I make the ACTIVE state “stick” on dynamic pages?
I am wondering if you could use a jquery option instead for the active page
Thank you! You have some great tutorials!
Chris I’d like to thank you from the utmost of my heart for such a fabulous idea like css-tricks that has over the years inspired upcoming web designers and developers alike. If I should start mentioning the things I’ve learned from you, your database might explode. lol. Thanks again bro.
“Me too”, thanks. This was a clever way to implement it cleanly, I just made good use of it.
Because of the CSS Sprites technique, you reduced the amount of menu images from 9 to 3.
Can’t you take this a step further and create 1 image with the 9 menu states and just re-position them accordingly?
Hello,
Can this also be done for a custom vertical menu; do you a have a tutorial for that as well?
Thank you