How to: Recreate apple.com menubar

by Jean-Baptiste Jung. 70 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!

Comments (70) - Leave yours

  1. Web 2.0 Announcer said:

    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.[...]…

  8. Doc4 said:

    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.

  9. Doc4 said:

    *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

  12. Loogares said:

    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 !!

  14. Loogares said:

    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 =)

  16. Preston said:

    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.

  18. Preston said:

    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.

  19. jbj said:

    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.

  24. Roco said:

    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?

  26. Robby said:

    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

  29. Dave said:

    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.

  30. Preston said:

    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. www.comprojects.net

  31. Preston said:

    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.

  38. Luisgla said:

    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!

  41. andriy said:

    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.

  44. Jake said:

    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.

  45. richard said:

    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…

  46. alex said:

    i need help how do i make the .css and those files. im using xcode someone make a video please!!!!!!!!!

  47. melekzedek said:

    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.

  49. Jen said:

    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!

  57. Corey said:

    Great demo…however now that Apple has released the iPad, their graphic has changed and all the numbers for the button areas have changed. Ugh.

  58. Corey said:

    For the “locked on page state” (e.g. to show the page button as “selected”) simply add “class=store” (or whichever page you want to show as selected) in the first tag

    e.g. will make the “Store” button show as selected.

    • Max said:

      Hi Corey! Please, advise where to input “class=store”? In CSS or HTML? Please, be more specific and in detail, if possible. Thank You Very Much for Your help!

      • Rob said:

        To make the current page’s button lock down as per the /ON STATE/ you need to include
        the page’s class in your code.

        ie To have the Store page button be locked down when it is active, the code would be:

        • alex said:

          Hi Rob, are u able to post the code? u can leave out the >< with () because the site sees it as code. i would be very interested in seeing it though.
          Cheers.

  60. tim416 said:

    Thanks for posting this!

    I’ve managed to build myself a menu using this technique but have found that in IE 8 (compatibility mode turned off) The last two buttons are positioned incorrectly vertically. They line up with the middle of the baseline of the first items. Has anyone else had this problem? Any workarounds?

    Other than that is show up perfectly in Firefox and Chrome without any errors.

    Is IE frustrating or what?

    Thanks,

    Tim

    • tim416 said:

      Problem solved, it was some other css styling I had done for margin-left on the li items that was messing things up.

  61. ibit said:

    This is great! Exactly what I need. So easy to implement with your excellent instructions.

    However, I am working on a WordPress static page website which uses PHP. Is there any chance that I could use this in my pages in my WordPress site? Gave it a shot, but not sure how to do it.
    Keeping my fingers crossed.

  63. José said:

    Thank you very much for this tutorial.

    It is the best I have found after many, many searches.

    I was looking for this, since iWeb doesn’t allow to create rollover buttons.

    The issue now is how to combine wit a site created with iWeb.

    • Tom Banner said:

      You can’t import html into iWeb. Only thing I can suggest is trying to get a html code for the whole thing out of another program and then putting it into a html snippet in iWeb.

  64. Darklift said:

    Can you post an edited code. The navbg image has changed since iPad was released and its very cumbersome for a newbie like me to get the numbers in the coding right.

    Thanks

  65. Daniel said:

    Thanks sooo much for this article!
    I am going to use the same sort of style for my website – but have a hand-drawn menu bar!

    Just for the future – and for other visitors: I found that the link in your paragraph:
    “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.”
    Goes to http://images.apple.com/global/nav/images/globalnavbg.png.
    And so when you try and use that, it doesn’t lineup very well! But I found the file that works (and that you have in the preview image):
    http://itunes.apple.com/images/rssgenerator/globalnavbg.png

    And the other thing was that I thought you might like to clarify the fact that you add the bit of code INSIDE the body tags. Rather than “above”

    Thanks again.

    ATB
    Daniel

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!