#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. Uriá Fassina
    Permalink to comment#

    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. Ken
    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. Chib
    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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.