New Screencast: Three State Menu
There is a new screencast up in the videos section: “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 elminates 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.
I know I promised to keep them shorter, but there was a lot to say on this one! I went all the way from the original Photoshop file, to the markup, to the CSS showing all the steps so it clocked it at almost half an hour. Soon I’ll start getting more focused on these things.
Loading ...
1
Your solution has solved a problem I’ve been having for a long time with regard to displaying a tab as the currently selected tab based on a the current page while using an included menu. I had been trying to achieve that effect using javascript but without any success. I really like that you added an ID to the body tag. I had never thought to do that but after seeing how you used it it makes sense. Thanks!
Comment by Ferdog — February 29, 2008 @ 5:29 am
2
Believe it or not I was just trying to do this yesterday, with no luck. Wake up this morning check css-tricks and booom a nice walk through. IT’S LIKE YOU READ MY MIND!!!!!!!!!!
Comment by trey — February 29, 2008 @ 8:41 am
3
I would recommend creating one big image of all your navigation buttons. Then you are only making a single call to the server for the image instead of multiple calls (one for each navigation image). Then you can just expand a little in the CSS to achieve the proper positioning depending on default, rollover or active states.
Check out this site I worked on to see an example. Feel free to dig into the CSS to see exactly what is going on behind the scenes.
Gospel Music Channel
Navigation background image
The style sheet
Comment by chipgrafx — February 29, 2008 @ 9:55 am
4
Woot a new one! Gonna watch it right away. Thanks for that.
Comment by Tobey — February 29, 2008 @ 11:00 am
5
Yes, another impressive tutorial, thank you so much !
Comment by jamalac — March 1, 2008 @ 3:30 am
6
Good tutorial ! Like others said, cool idea to put the id in the body tag for the active state.
By the way, next time you want to increase canevas size by a precise number of pixel, don’t grab the calculator. Instead, just click “relative” bellow width/height and directly type the number of pixel you want your canevas to be increased.
Comment by Antoine — March 1, 2008 @ 12:21 pm
7
Good tutorial.
A very minor mistake - You forgot to close the tag.
Comment by syed — March 2, 2008 @ 5:50 am
8
I meant the “ul” tag.
Comment by syed — March 2, 2008 @ 5:52 am
9
been playing with the code for the “3 State Menu’.
How do I centre the Links?
I cannot seem to get it done, any help? text-align on the ul does not work, what’s the solution? just learning all this CSS stuff and enjoy trying some of the examples you have been showing us all.
love your site and find it quite helpful and educational,
Al
Comment by Al — March 2, 2008 @ 8:52 am
10
found out how, put “margin: 0 auto; width: ???px;”on the ul statement, now need to investigate why it works?
Al
Comment by Al — March 2, 2008 @ 2:30 pm
11
Yep Al, that’s the ol’ centering trick, only works when you declare a width though, which is fine in the case of this example because the menu items are all images (which inherently have static widths). This becomes much more difficult to do when trying to do it with text items.
Comment by Chris Coyier — March 2, 2008 @ 3:27 pm
12
A little late response - sorry I was very busy again - but I really enjoyed this tutorial. I think it’s the best one so far. It’s obvious that you improve your video-skills in the last weeks. I think the speed was good and and the level of techniques too. Maybe it’s a good idea to practice your math-skills more so you don’t need the calculator on your dashboard anymore
Enough about the video now, I agree with chipgrafx that it may be a good idea to put it all in one image, but maybe that was to much in once for this tutorial. It was very good to show the css- sprites technique in practice again. Thank you for this great tutorial and soon I’ll watch the next video soon.
Comment by Edwin — March 11, 2008 @ 7:45 am