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:

Comments

  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#

    Hello,

    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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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