How to: Recreate apple.com menubar

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

  • Pingback: Web 2.0 Announcer

  • http://psmagic.forumeiros.com Igor

    Really Nice!
    Thx for the post..

  • http://ptz0n.se/ Erik Pettersson

    Simple and amazing code! I just love it!

  • Pingback: Crear la barra de navegación de Apple.com — Tablosign

  • Pingback: » Links for Sunday #3 codegeeks: pure coding!!!

  • http://www.tutorialsgarden.com/ zbrush, maya, 3ds max, rhino 3d tutorials

    Lol, very nice tutorial, I was looking for it 6 motnh ago.

    Best,

  • http://www.ronakorn.com thai seo

    Great tutorial, Thanks.

  • http://www.doc4design.com Doc4

    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.

  • http://www.doc4design.com Doc4

    *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

  • http://www.lyxia.org jbj

    Thanks for this, Doc4!

  • http://www.doc4design.com Doc4

    No problem, I hope that made sense to everyone, though it should be included in the tutorial. Hint, Hint :)

  • http://www.technofreakz.es Loogares

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

  • http://www.lyxia.org jbj

    Thanks Loogares! Do you mean, the search field? If yes, I didn’t inclued it in the tutorial.

  • http://www.technofreakz.es Loogares

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

  • http://hayespotter.co.nr Hayes Potter

    Very nice code, I love CSS sprites! They are just so cool to be true, but they are true.

  • Preston

    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.

  • http://www.lyxia.org jbj

    @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.

  • Preston

    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.

  • http://www.lyxia.org jbj

    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.

  • Preston

    Thanks jbj!

  • http://www.creditcardsonlineapps.com Starry Nebula

    Thanks for the awesome help!

  • http://leo4all.com bhast2

    how can i add the search to this so it is the full bar
    thanks

  • http://www.lyxia.org jbj

    @bhast2: Sorry, but I haven’t checked out how to add the search bar. Maybe I’ll figure it out in a future tutorial :)

  • Roco

    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?

  • Steve

    Thanks This tutorial was a great help! Dugg!

  • http://levithepoet.com Robby

    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

  • Pat

    Thanks Doc4 for the tip and jbj for the article.

  • joel

    This is incredible, I was just wondering, what would you have to do to change the width for each button??

  • Dave

    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.

  • http://www.comprojects.net Preston

    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

  • http://www.comprojects.net Preston

    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.

  • http://www.KeepMyMarbles.com Dave

    Great code! Thanks.

    Dave

    KeepMyMarbles.com

  • Sam

    Thanks a lot! One question… how do I make one of the links active?

  • http://www.wprecipes.com Jean-Baptiste Jung

    @Sam: I don’t really know, probably by modifying css positions.

  • Sam

    Hey! Thanks for the response. I tried putting class=”active” but it didn’t work. Can you think of anything?

  • http://www.allvirtualrealty.com/ Virtual Realty

    wow good info. Thank you for sharing this code.

  • Parithi

    What font does apple.com menubar have? Myriad Pro?

  • Luisgla

    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!

  • http://www.thestorageunits.info Storage

    nice tips thanks for sharing.

    kind regards

  • Pingback: How to: Recreate apple.com menubar : infoeduindia multimedia collection

  • andriy

    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.

  • http://killerinvestments.net Investor

    This is pretty cool, do you know how to make the menubar that comes at the bottom of apple computers (aka dock)?

  • premkumar

    Very nice, Thanks

  • Jake

    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.

  • richard

    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…

  • alex

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

  • melekzedek

    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.

  • http://jeremypiersongraphics.com Jeremy

    ok figured out the search bar code:

    directly under the closing tag add this:

    then in your css add this:

    #whatthe {
    height: 37px;
    }

  • http://jens-portfolio.webs.com/menu/index.htm Jen

    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!

  • http://www.wprecipes.com Jean-Baptiste Jung

    Sorry I forgot IE even existed…

  • Robbie

    I can´t figure out the search bar … can anyone help with this?

    Cheers!

  • http://www.danrasmussen.se/ Danne

    This is really a simple solution. I will try it out now. Thanks.

  • Pingback: 15个Apple设计风格代码指南 | 知更鸟

  • Pingback: uberVU - social comments

  • Radik

    Perfect!!! but NO SEARCH ?

  • geo

    superb..thanks a lot…but u didnt explain how to put it on website

  • Corey

    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.

  • Corey

    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.

    • http://- Max

      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

        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

          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.

  • http://www.get2freegames.com Viatcheslav G.

    The article was very useful. I implemented the apple style menu right away. Very clean and usable.

  • tim416

    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

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

  • ibit

    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.

  • Michael

    How can I see it in action?

  • José

    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

      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.

  • http://vestroia.net/ Darklift

    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

  • http://www.danielcallen.co.uk Daniel

    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