Step 1: Before we start
If you never saw apple.com menubar, here’s a screenshot of what we’re going to create:
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!
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
50 Comments
Really Nice!
Thx for the post..
Simple and amazing code! I just love it!
Lol, very nice tutorial, I was looking for it 6 motnh ago.
Best,
Great tutorial, Thanks.
This tutorial is missing the locked-on page states. The css clearly shows it, but implementing this as is won’t effectively lock the menu on any particular page. For example if you visit the “Store” page from the above menu the “Store button” will not lock into the “On” state without either using some php or making sure each page’s navigation is classed by it’s appropriate tag.
Something to this effect, or if you’re into single navigation pages you could use a php include and utilize a single navigation which then looks for which page it’s on to add in the appropriate class.
<div id=”container-globalnav”
>
Good luck to everyone and thanks for the nice tutorial, this makes rollover navigation design much easier.
*div id=”globalheader” class=”store*
*!–googleoff: all–*
*ul id=”globalnav”*
or
*div id=”container-globalnav”*
*?php if ($thisPage==”Home”) echo ” class=\”home\”"; ?**
Code didn’t print. Where you see the * place the appropriate greater than or lesser than sign
Thanks for this, Doc4!
No problem, I hope that made sense to everyone, though it should be included in the tutorial. Hint, Hint
HI !! i really think this is awesome tutorial, i was looking for that for a while, i’ve been just unable to make appear the last part of the menu, can you help me out with that ?
Thanks a lot,
Great JOB !!
Thanks Loogares! Do you mean, the search field? If yes, I didn’t inclued it in the tutorial.
Hi and thanks a lot !! i mean the last part of the menu, the graphic the last one at right the one that is not an option the “empty one” i do put all files in html and css and everything works great, except for the last empty item of the menu, i dont know if im doing something wrong .
Thannks a lot for the reply =)
Very nice code, I love CSS sprites! They are just so cool to be true, but they are true.
WOW, thanks for the post. Very clean and easy. I do have a couple of questions, one of which refers to Loogares’s last comment and may be related to my last question. Is their a way to unlock or control the width and height of the over, pressed, and on states. I have a background image that is similar to Apples, but I need to be able to adjust the size of these states. Any help would be great.
@Preston: No, you can’t, since the image have fixed width. The only thing to do is creating another image that wil fits your needs.
Thanks jbj, just so I understand, the css code is locked. I have an image here: http://www.flickr.com/photos/30247430@N07/2834113596/ if you don’t mind looking at it.
Oh, ok, I see what you want to do. You have to edit the css, and modify the background-position: properties in order to fits your dimensions.
Thanks jbj!
Thanks for the awesome help!
how can i add the search to this so it is the full bar
thanks
@bhast2: Sorry, but I haven’t checked out how to add the search bar. Maybe I’ll figure it out in a future tutorial
Hi,
This is just what I was looking for. Thanks so much!
Just one question. I’m having trouble centering it. It always appear in the left side of the page. Do you know how can I change this?
Also, for creating my own navbar layout, are there any precautions to have? Do the for states of the navbar need to be done in the same document?
Thanks This tutorial was a great help! Dugg!
I am having trouble with this working in any browser other than safari..is this common or does anyone have a work-around..i know i am new at this but love the navigation. thanks
Thanks Doc4 for the tip and jbj for the article.
This is incredible, I was just wondering, what would you have to do to change the width for each button??
Thanks for the guide!
The one question I have is how to lock down the button when you select something else on the page? I see Doc4’s explanation, however I’m not quite sure how to implement it. I’m using a single page navigation (each button is hiding/showing divs) and I don’t have a PHP server.
Any help would be greatly appreciated.
Robby: what kind of issue are you having with other browsers, is it the overlapping of menu bar? I had an issue with the size and how the borders between the buttons appeared in Firefox. It always came up fine in Safari, but not in Firefox or IE, but now it works fine. I even got rid of the red border in Firefox with a simple line of code. Let me know if I can help.
Joel: I have spent forever trying to work with the width of each button, you really have to play with the css file. Maybe jbj can shed some light on this one. Here is a link to my site to get an idea, I know it looks almost identical to Apple’s site, but I will be changing the color and some other stuff soon. http://www.comprojects.net
Dave: the way I locked the button in the down state, I created an HTML for each page along with separate CSS files. For example, lets say you already had your home,about,support,contact us and so forth, I created a css style sheet along with each html page. To get the css in the down state (/*BUTTONS */) is to go to that specific line of the css style sheet and edit the position of the page, so add this for example: #globalheader #globalnav li#gn-home a { background-position: -247px -114px; } instead of the default #globalheader #globalnav li#gn-home a { background-position: -247px -0px; } Hopefully I am making some sense, it took me a while to get my site the way I wanted it. Try this app CSSedit.
Great code! Thanks.
Dave
KeepMyMarbles.com
Thanks a lot! One question… how do I make one of the links active?
@Sam: I don’t really know, probably by modifying css positions.
Hey! Thanks for the response. I tried putting class=”active” but it didn’t work. Can you think of anything?
wow good info. Thank you for sharing this code.
What font does apple.com menubar have? Myriad Pro?
yeah! myriad pro.
and how can we add the last button? I mean, not the search one, but another one like the other… by appearing in the html.
thanks!
nice tips thanks for sharing.
kind regards
Dear author,
thanks a lot for the code! however, i faced a problem: i painted my own .png pic, and it doesnt work! when i mouse over that area, the links are clickable, but nothing is shown. funny thing is, that if to take the .png pic from the apple homepage, it works. and another issue: if to take apple’s png file, copy it and paste it into a new file, export it as png, it also doesnt work… could u please help me? thanks.
This is pretty cool, do you know how to make the menubar that comes at the bottom of apple computers (aka dock)?
Very nice, Thanks
Mine is not working and I am not sure why. The thing wont show it just looks like a bulleted list. and the Store one is the only one that works.
Question…how do we change the titles of the buttons? I can’t find a tutorial for how to do this. Can you direct or teach me?
Thanks…
i need help how do i make the .css and those files. im using xcode someone make a video please!!!!!!!!!
To change the titles of the buttons you can do the following:
1) open the image in an image software (e.g. GIMP)
2) just copy a vertical portion (note that the changing in colour happens in vertical) that doesn’t have text and simply copy to the area with the text
3) after having a button without text, it’s easy to put text on the buttons.
ok figured out the search bar code:
directly under the closing tag add this:
then in your css add this:
#whatthe {
height: 37px;
}
Having some problems with the menu in IE. Can somebody look at my code. So, I know where to fix it. Everthing looks fine in firefox and Sarfari, but not IE. How would I go about fixing this. Thanks!
Sorry I forgot IE even existed…
I can´t figure out the search bar … can anyone help with this?
Cheers!
This is really a simple solution. I will try it out now. Thanks.
Perfect!!! but NO SEARCH ?
superb..thanks a lot…but u didnt explain how to put it on website
6 Trackbacks
How to: Recreate apple.com menubar…
[...]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.[...]…
[...] Tutorial donde se explica como crear la barra de navegación de Apple.com. Para tenerlo en cuenta, ya que la manera en que está hecho abre muchas posibilidades. 0 # [...]
[...] How to: recreate apple.com menu bar [...]
[...] View Tutorial [...]
[...] 3. How to: Recreate apple.com menubar [...]
Social comments and analytics for this post…
This post was mentioned on Twitter by snowaero: RT @catswhocode http://www.catswhocode.com/blog/how-to-recreate-applecom-menubar…