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.

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!