Grow your CSS skills. Land your dream job.

#7: Three State Menu

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:


  1. blurred
    Permalink to comment#

    always wanted to learn this :)

  2. 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)

  3. Permalink to comment#

    Pretty neat! What about WordPress? How do I make the ACTIVE state “stick” on dynamic pages?

  4. Mark
    Permalink to comment#

    I am wondering if you could use a jquery option instead for the active page

  5. Robert
    Permalink to comment#

    Thank you! You have some great tutorials!

  6. Permalink to comment#

    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.

  7. Bruce
    Permalink to comment#

    “Me too”, thanks. This was a clever way to implement it cleanly, I just made good use of it.

  8. Umit
    Permalink to comment#

    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?

  9. Adrian Cook
    Permalink to comment#


    Can this also be done for a custom vertical menu; do you a have a tutorial for that as well?

    Thank you

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".