#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. User Avatar
    Permalink to comment#

    always wanted to learn this :)

  2. User Avatar
    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. User Avatar
    Permalink to comment#

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

  4. User Avatar
    Permalink to comment#

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

  5. User Avatar
    Permalink to comment#

    Thank you! You have some great tutorials!

  6. User Avatar
    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. User Avatar
    Permalink to comment#

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

  8. User Avatar
    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. User Avatar
    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!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.