#7: Three State Menu

by: Chris Coyier

Nov 21 2008

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:

Running Time: 27:17

Download Video File

Subscribe to The Thread

  1. blurred

    always wanted to learn this :)

    Reply ↓
  2. Uriá Fassina

    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)

    Reply ↓
  3. Ken

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

    Reply ↓
  4. Mark

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

    Reply ↓
  5. Robert

    Thank you! You have some great tutorials!

    Reply ↓
  6. Chib

    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.

    Reply ↓
  7. Bruce

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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~