5 tutorials to web design, the apple.com way

Apple style Accordion Menu

Let’s start with a nice tutorial from DynamicDrive. Remember that post where I shown you 10 javascript sliders? Here’s another great way to display your content: This menu mimics the look of the vertical menu found on certain areas of Apple.com. The headers are toggled via “mouseover” over each one, and the previous expanded header (if any) is closed before expanding the current.
→ Source

Recreate Apple.com menubar

Apple.com menubar mixes clean code and very cool design. In this tutorial, I’ll show you how to recreate Apple’s website navigation bar and study the techniques used.
→ Source

Apple.com CSS image replacement

This CSS technique is used on many websites, but as usual, apple.com do it very well. There’s many different way to replace a text by an image using css, but in my opinion, the following code is the best way to do it:

h2 {
    background: url(itunes_main_title20080609.gif) no-repeat;
    height: 60px;
    text-indent: -9999px;
    overflow: hidden;
    color: #000;
    font-size: 22px;
    margin: 52px 0 10px 0;
}

Did you noticied the text-indent:-9999px; and the overflow:hidden; ? This is the key. It allows us to visually hide the text without ruining our SEO.

Create apple.com-like breadcrumb using simple CSS

In this great tutorial, Janko Jovanovic will show you how to create a apple-like breadcrumb. If you’re a WordPress user, don’t forget our tutorial for adding breadcrumbs to your WordPress theme.
→ Source

Apple.com stylesheet anatomy

You know it: Apple is one of the coolest brand names in technology, so no wonder their site should adhere to modern web design standards. Divs, classes, no tables, media types, ajax libraries, separated stylesheets, extensive code organization, interesting varying layouts, it’s all there for you to learn from.
In this very interesting article, German developper Reinhold Weber analyses apple.com stylesheets anatomy. A must read!
→ Source