The History of Apple.com's Nav Bar Made with CSS

Over 900 lines of uncompressed CSS, plus a little base64 & jQuery
A demo made with love by Matt Boldt.
View the Code

1998 - 1999

2000 - 2001

2001 - 2007(This design varied over the years)

2007 - 2010

2011 - Current

The Future (but probably not)

The Future (à la iOS 7)

Developed using Google Chrome for Mac. Works well in Firefox. Some animation issues in Safari.

All css & html is hand-written. Nav bar designs inspired by Apple. Thanks Wayback Machine!

jQuery handles things like element resizing on input focus, and search suggestion display logic.
Animations are CSS3's -transition property.

Note: The Apple Icons are, indeed, images. They are rendered in CSS with a Base64 background image.
So, you know, you can still copy and paste the code anywhere. I'm also using icon fonts for the magnifying glass icon in the search bar.