Apple Style Menu Tutorial Using CSS Sprites

Intro:
The menu that Apple uses on its website is becoming more of an iconic menu bar, especially to us web designers and developers. It is really simple to create and there are a variety of states. One interesting aspect that Apple has also used here, is the CSS sprite effect. Here, we will recreate the menu using Photoshop and CSS sprites!

Rest of article and tutorial:
Apple Style Menu Tutorial Using CSS Sprites

 

Very simple and basic menu. Perfect tutorial for a beginner!

 

Nice one, I will use it in the future.

 

Thanks, it is definitely made to be a very quick, easy and simple menu to put together. The beauty of it is that you can modify the image to suit your needs and really get a custom effect going. Enjoy.

 

Wow no joke I was just thinking I wanted to create something similar to Apple's for my site, and I searched without luck on Google (It's hard to search when you don't know the name of the menu style )

Thanks +rep

 

Thanks. I didn't really know what else to call it so I figured the name "Apple Style Menu" was good enough
What a coincidence hey? Well hopefully now you have a good source and tutorial!

 

Nice very simple and neat

 

Yeah, that's great tutorial.

 

Thanks all. If you have any requests for the next tutorial please PM me.

 

Nice menu i really like it and i will use it in my site surely.thanks

 

No problem phpaddicted! Hopefully others enjoyed it too

 

Can't say that I did. I can't see the damn final product. Cause, guess what? I have images disabled, and because you have bleeding text in the images, I can't see it.

Text does not belong in images, it is an inaccessible mess, and I'm no experts but Search Engines probably don't like it.

My way of doing it would be on my up and coming site:
http://dredgy.com/

It works perfectly with images disabled - cause text is actually TEXT. And it is much faster to load cause look:
http://dredgy.com/images/buttons.png

There is only a one pixel image used for the whole thing - all three change states etc, and if you can follow that tutorial, you'll find mine is considerably easier to use.

Sorry for interrupting, but yours is a very bad way to do a menu

 

thx a lot for this !

 

That is very nice, and to search engines it doesn't matter at all because all they see is the text between the list item tags. The text is just not shown because of the CSS, and spiders etc. don't judge on what they seem from CSS, only the HTML source.

As for your load times, you are almost the only one that I know who has images disabled. I am not sure why, but from what I can judge, I don't think everyone is anywhere near this stingy that they don't want to waste the extra few MB of bandwidth from their internet per month. And I am very certain that you can achieve a lot better looks with this menu then you could with text. What say you wanted some unique background from each menu item with some fancy fonts. Go try do that without having images!

The purpose of this tutorial, was to outline how possible it is to create a lightweight and good looking menu without damaging any SEO perspectives and achieving a fully customized looking menu without the plain and basic menu that you have shown in your example.