I ran across an article on the wonderful catswhocode website about recreating the Apple website menu. From the catswhocode: "Apple.com menubar is really an example in terms of clean, semantic code and very cool design. In this tutorial, I propose to recreate Apple's navigation bar and study the techniques used."

Apple has an interesting take on the CSS menu that I hadn't seen anywhere else at the time and thought it was worth looking into. After studying the code and testing it out on a client's site ( Stafford SlipKnot ), it became clear that the tutorial was missing a few pieces of code needed to complete it. I wrote about this missing code in the comments of the original tutorial, however, it was never added and I receive a lot of emails asking for more explanation. In an effort to stave off some of those emails, I decided to just write a post to get the information out there.

Let's get started: In the original tutorial, we begin with the HTML from apple.com seen here. I find it easier to begin by shortening this for explanation purposes so let's cut it down a little and simplify what we are looking at.

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.