How to: Recreate apple.com menubar

Posted by jbj on Jul 18, 2008 in Web design • 15 comments

Apple.com menubar is really an exemple in terms of clean, semantic code and very cool design. In this tutorial, I propose you to recreate Apple’s website navigation bar and study the techniques used.

Step 1: Before we start

If you never saw apple.com menubar, here’s a screenshot of what we’re going to create:
How to: Recreate <a href=apple.com menubar” />

As we’re going to recreate apple’s menu bar, we will need to create two files: a blank style.css and a menu.html file, containing the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Apple's menubar</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

</body>
</html>

The last thing you’ll need is the backgound image from Apple website. Save it on the same directory than your html and css file for this exemple.

Step 2: Creating the HTML

Let’s go to Apple.com and display the source code. The part which interest us is this one:

<!--googleoff: all-->
<div id="globalheader">
<ul id="globalnav">
	<li id="gn-apple"><a href="/">Apple</a></li>
	<li id="gn-store"><a href="http://store.apple.com">Store</a></li>
	<li id="gn-mac"><a href="/mac/">Mac</a></li>
	<li id="gn-ipoditunes"><a href="/itunes/">iPod + iTunes</a></li>
	<li id="gn-iphone"><a href="/iphone/">iPhone</a></li>
	<li id="gn-downloads"><a href="/downloads/">Downloads</a></li>
	<li id="gn-support"><a href="/support/">Support</a></li>
</ul>
</div><!--/globalheader-->
<!--googleon: all-->

As you can see, this incredible menu bar is just…a simple html list! Paste the code above in the body section of your menu.html file and save it. Don’t be afraid to display menu.html in your web browser and see how does it looks! Well,we’ll have to style it, obviously ;)

Just a quick note about theses <!–googleoff: all–> and <!–googleon: all–> tag: By using theses custom google tags, apple’s coders told the googlebot to not index the part below the <!–googleoff: all–>. When the googlebot see the <!–googleon: all–> tag, it will continue to index the source.

Step 3: CSS at its best

As you probably expected it, the css is quite big. Happilly, it’s also very well commented and organized. Paste the following code into your style.css file.

/* GLOBALHEADER */
#globalheader { width: 982px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalsearch { background-image: url(globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-rep
eat: no-repeat; }

/* BUTTONS */
#globalheader #globalnav li#gn-store a { background-position: 0 0; }
#globalheader #globalnav li#gn-store a { background-position: -117px 0; }
#globalheader #globalnav li#gn-mac a { background-position: -234px 0; }
#globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; }
#globalheader #globalnav li#gn-iphone a { background-position: -468px 0; }
#globalheader #globalnav li#gn-downloads a { background-position: -585px 0; }
#globalheader #globalnav li#gn-support a { background-position: -702px 0; }

/* OVER STATES */
#globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-store a:hover { background-position: -117px -38px; }#globalheader #globalnav li#gn-mac a:hover { background-position: -234px -38px; }
#globalheader #globalnav li#gn-ipoditunes a:hover { background-position: -351px -38px; }#globalheader #globalnav li#gn-iphone a:hover { background-position: -468px -38px; }
#globalheader #globalnav li#gn-downloads a:hover { background-position: -585px -38px; }
#globalheader #globalnav li#gn-support a:hover { background-position: -702px -38px; }

* PRESSED STATES */
#globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; }#globalheader #globalnav li#gn-store a:active { background-position: -117px -76px; }
#globalheader #globalnav li#gn-mac a:active { background-position: -234px -76px; }
#globalheader #globalnav li#gn-ipoditunes a:active { background-position: -351px -76px; }
#globalheader #globalnav li#gn-iphone a:active { background-position: -468px -76px; }
#globalheader #globalnav li#gn-downloads a:active { background-position: -585px -76px; }
#globalheader #globalnav li#gn-support a:active { background-position: -702px -76px; }

/* ON STATES */
#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }
#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }
#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }
#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }
#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }
#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }
#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }

Once you saved your style.css file, display menu.html in your favorite web browser, and your apple menu is ready
:)

Now, it’s time to experiment

Even if re-creating apple.com menubar is fun, in my opinion, the most interesting thing to do is learning from the technique used here. Only 1 image is used and the html code is really good in terms of semantics.
I barely never saw similar menus, so if you’re looking for a clean and eye-candy navigation for your website, feel free to experiment!

15 reactions

» Comments RSS Feed

Leave a comment