I stumbled upon an incredibly informative and enlightening article while browsing the internet. The article caught my attention as it delved into the fascinating topic of recreating the remarkable 2009 Apple website menu. According to the article, Apple.com's menubar is not only a shining example of clean and semantically coded design but also a source of inspiration for many web developers. Intrigued by the claim, I decided to explore the techniques employed in crafting this iconic navigation bar.

The uniqueness of Apple's CSS menu immediately struck me, as it showcased an innovative approach that seemed to be absent in other web design implementations at that time. Curiosity piqued, I delved deep into the code, meticulously studying every line, and couldn't resist the urge to put it to the test on one of our client's websites, Stafford SlipKnot. As I embarked on this exciting journey, I soon discovered that the tutorial, despite its brilliance, lacked a few crucial pieces of code necessary to complete the recreation process successfully. In a valiant effort to bridge this gap and alleviate the flood of emails inundating my inbox, I took it upon myself to write a comprehensive post, shedding light on the missing code and providing a thorough explanation.

Without further ado, let's embark on this captivating journey together! In the original tutorial, we begin by examining the HTML code extracted from the revered apple.com. To facilitate our understanding and ensure clarity throughout the process, I propose condensing and simplifying the code to focus solely on the essential elements that warrant our attention and analysis. By doing so, we can delve deeper into the intricacies and uncover the secrets behind Apple's breathtaking navigation menu, enabling us to grasp the underlying techniques employed and apply them in our own web design endeavors.

Original Apple Code

<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/us">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">Downloads</li>
<li id="gn-support"><a href="/support/">Support</a></li>
</ul>
</div>

Simplified Code

Our simplified and shortened code.

<div id="menu">
<ul id="menu-list">
<li id="menu-home"><a href="http://www.my_site.com">Home</a></li>
<li id="menu-about"><a href="http://www.my_site.com/about">About</a></li>
</ul>
</div>

This may make a little more sense in terms of relating it to your own website. You may also want to place this on its own page titled menu.php. Keep in mind the catswhocode tutorial assumes that a fully designed menu has been created in the same fashion that Apple has designed theirs. If you're wondering why this is important, take a look at the source code for the apple.com menu and you will see that it is a single image which includes all roll-over states. Once you have all of this ready to go, we can move on to the CSS code starting with the styles taken directly from Apple's website:

Original Apple CSS

#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(images/globalnavbg.gif);
 /* the underscore indicates an IE6 target only */
 background-repeat: no-repeat;
 }

There is quite a bit more than the "snippet" shown here but it's easy to get lost in and it's not really important for this tutorial, so let's simplify this for our needs. Shown here is a condensed version.

Simplified CSS

#menu {
 width: 982px;
 height: 38px;
 margin: 18px auto;
 position: relative;
 z-index: 9998;
 }

#menu #menu-list {
 margin: 0;
 padding: 0;
 }

#menu #menu-list li {
 display: inline;
 }

#menu #menu-list li a {
 float: left;
 width: 117px;
 height: 0;
 padding-top: 38px;
 overflow: hidden;
 }

#menu #menu-list li a {
 background-image: url(images/menu-background.jpg);
 background-repeat: no-repeat;
 }

#menu #menu-list li#menu-home a {
 background-position: 0 0;
 }

#menu #menu-list li#menu-home a:hover {
 background-position: 0 -38px;
 }

#menu #menu-list li#menu-home a:active {
 background-position: 0 -76px;
 }

#menu.home #menu-list li#menu-home a {
 background-position: 0 0px;
 cursor: default;
 }

#menu #menu-list li#menu-about a {
 background-position: -117px 0;
 }

#menu #menu-list li#menu-about a:hover {
 background-position: -117px -38px;
 }

#menu #menu-list li#menu-about a:active {
 background-position: -117px -76px;
 }

#menu.about #menu-list li#menu-about a {
 background-position: -117px -114px !important;
 }

I've grouped these into two sections: the overall menu styles and the individual menu link styles. The "Home" and "About" links each have four styles. Place this code either in your page header or on a separate stylesheet. If you have implemented this code so far and started clicking through to either of the two pages "Home" or "About", you may have noticed the menu doesn't stick or lock-on to a highlighted menu indicating the user is on a particular page.

The first option I propose is utilizing a PHP $thisPage function to name your pages. This means that your menu will need to be coded using a PHP include. Start by creating the menu.php page and insert the code from above. Follow this by including the PHP include in the location the menu should appear on the page. For example, the index.php page should look like: (Please note: This option only works if you're using PHP to build your website. If this isn't your situation, please take a look at the second option below.) To get this to work properly, place the following code at the very top of your index.php and adjust it accordingly for each page thereafter. For example: if working on the about.php page, change the variable to "About" instead of "Home".

<?php ($thisPage=="Home"); ?>

Once your pages are properly named, we need to make some changes to our menu.php page:

<div id="menu"
 <?php if ($thisPage=="Home") echo "class=\"home\"; ?>
 <?php if ($thisPage=="About") echo "class=\"about\"; ?>>
 <!--note that the above php lines are inside the div id="menu" tag-->

 <ul id="menu-list">
<li id="menu-home"><a href="http://www.my_site.com">Home</a></li>
<li id="menu-about"><a href="http://www.my_site.com/about">About</a></li>
 </ul>
</div>

Above we check which page we are on by asking if we are the "Home" page and if so print out (class="home"), thereby informing the menu which option it should lock-on to.

The second method I propose is a bit more tedious but it gets the job done if you're not using PHP. Instead of using the PHP ($ifthisPage=="Home"), the includes and the menu.php page we are simply copying the entire menu code onto each page; for example index.php and including our special CSS class dependent on the page we are working on. For example, if we are on the "About" page:

<div id="menu"class="about">
 <ul id="menu-list">
<li id="menu-home"><a href="http://www.my_site.com">Home</a></li>
<li id="menu-about"><a href="http://www.my_site.com/about">About</a></li>
 </ul>
</div>

Add the above code to each page being sure to change out the variable to match the page you're working on. I've done my best to keep the code in correlation with the Apple web site for reference purposes but please let me know if anything was left out.