Index-

• Apple Style Menu end result
• Introduction
• Photoshop
• HTML + CSS
• Conclusion and Demo

Introduction

If you haven’t seen the menu before, then by all means please go check out the Apple website. The menu has an extremely basic look, however, this look also has some mouse over effects and even mouse click effects. If we study the menu a little closer, we can see that is is constructed from one image. Using one image and manipulating that image via CSS, Apple has attained a relatively light weight yet effective menu and saved themselves the trouble of having to create multiple images for each particular button and have saved us having to load those images.

This style is called sprites. In CSS we can define background images that start and end at a certain distance. For example, Apple has made the first button start at 0px and end at around 177px. Throughout this tutorial, we will not only be recreating the effect of the Apple menu, but also utilizing CSS sprites much like Apple have done.

Photoshop

I’m sure this comes as no suprise to any of you, we are going to use Photoshop to make the basic graphic. Remember, that this is one single graphic and therefore, you need to set the width and height to their respective values for the WHOLE menu, not just each menu item. In order to do this, we must first decide on the appropriate widths and heights for our menu items.

Let’s have a look at the Apple menu. If we look at the height of the menu, we can see that it is approximately 36px high. In order to make things simple, let’s round that up to 40px. Now what we need to achieve is our width for each button. Again, let’s measure up things from Apple’s menu. Apple have set their menu items to have around 118px width, let’s round that up to 120px for making life easier.

Now, we have the sizes, let’s go in and create our file. For this example, I will be making a menu with 4 items, “Home”, “Portfolio”, “Contact”, “About”. Unlike Apple’s menu, we will only be having two states for our items. The “up” state, and the “down” or “hover” state. Therefore, we only need to have two rows for our image.

Steps:

I’m going to begin by creating a new canvas with width of 480px (120 * 4) and height of 80px (40 * 2).

Now, here is a great recomendation that I highly suggest you all follow. If you are familiar with guides and rulers, then you can continue on, but if you are not, a handy little tool that Photoshop offers, is the ruler and guide tool. If you don’t have them active, hit Control + R to get the rulers showing, and Control + H to show extras (guides). Below is how I have setup my guides. A line dividing each menu item, and a horizontal line dividing the two different sets of our menu (normal and mouseover/selected).

To start things off, we first need a new layer. We must also set our foreground color to black (#000000). On a new layer and using the rectangle tool, draw a rectangle covering up the entire top half. On the new layer we just created, we must define some effects. Open up the layer style panel and add a gradient overlay effect with a custom gradient with the foreground set to grey (#959595) and the background set to a lighter grey (#d0d0d). The result should look something like this:

Believe it or not, but that is pretty much the menu. We just have to add some text and we are on our way. Use the type tool and set the font color to a darkish grey (#444444) and use the font face: Myriad Pro (standard on all Windows machines). Get a good font size, around 20px+ and start placing in your text for each button with each text on a new layer.

After that, simply add a drop shadow layer style to one of the text layers:

Now right click on the text layer that we just added the layer style to and select “Copy Layer Style”. Similarly, right click on all the other text-layers and select “Paste Layer Style”. Your end result should look a little like this:

We have now finished our top half of our menu. Now duplicate every layer that we have made so far. You can do this very easily by adding all the layers to a folder and duplicating the folder. With your duplicate menu, move it down so that it takes up the bottom half of our canvas. If you have done things right, it should look like this:

Basically two of our menus. Now, remember that gradient that we first added in for the background of the menu? Go to that layer on our new menu at the bottom and set the gradient opacity down to around 80% in the layer style panel. Your result should now be a darker menu on the bottom:

Now we just need to edit some fonts on the bottom menu, and we are done in Photoshop. To do this, we keep everything the same, and just edit some colors and positioning of those drop shadows we added in. Set the drop shadow style to the following on one of the text layers:

And again, simply copy this layer style and paste it ontop of the other text layers for the bottom menu and the old style will be overwritten with this one. Now we just have to set the font colors for the text on the bottom menu to white (#FFFFFF). The end result:

One final piece of the puzzle is the border between each menu item. This is a relatively quick process. Select the line drawing tool and set the foreground color to #969696. Set the mode to pixel mode and make sure the anti alias checkbox is unchecked. Now simply drag a line from the top to the bottom (including through the bottom menu) of the canvas along the guide lines that are in place. The auto-snapping should occur to make sure the lines are exactly between the menu items. After drawing the lines, add a stroke layer style effect to the border layer and have it set to- size: 1px; color: #b8b8b8b; position: outside; blend mode: lighten. After the borders, this is what your final product should look like: (Note, I took off the guides (Control + H) so you can see the border lines)

Now export the picture in whatever format you want, remembering that you want the file size to be as small as possible. Don’t worry about the guides either. When you export the image, no guides will appear. Make sure you don’t do any slicing, just export the picture as one file. In this case, I will export the picture as a JPEG file. Here is the final result and the file we will be using for our menu:

Phew, that was a long process through Photoshop, but the end result is well worth it!

HTML + CSS

This is actually the easiest part. Since the menu only uses one image and is basically a list, the HTML and CSS coding is very brief. Here is our HTML for the menu:

<ul class="menu">
<li id="item1"><a href="#">Home</a></li>
<li id="item2"><a href="#">Portfolio</a></li>
<li id="item3"><a href="#">About</a></li>
<li id="item4"><a href="#">Contact</a></li>
</ul>

Couldn’t get any easier! The CSS is also very basic. Here is the full CSS:

body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;

}
.menu {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.menu li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 120px;
height: 40px;
margin-right: 0px;
background-image:url(menu_sprite.jpg);
background-repeat:no-repeat;
}
.menu a{
display:block;
height:40px;
text-indent:-9999px;
outline:none;
}

#item1 {
background-position:0px 0px;
}
#item2 {
background-position:-120px 0px;
}
#item3 {
background-position:-240px 0px;
}
#item4 {
background-position:-360px 0px;
}

#item1.active, #item1:hover {
background-position: 0 bottom;
}
#item2.active, #item2:hover{
background-position: -120px bottom;
}
#item3.active, #item3:hover {
background-position: -240px bottom;
}
#item4.active, #item4:hover {
background-position: -360px bottom;
}

Here is a quick explanation of the above CSS.  Obviously, the first body setting just sets the font requirements and is quite standard. After that, we move on to defining the menu as being a horizontal menu and removing the indentations and list displays that HTML generates for us with the list elements. Since these buttons will most likely be linked, we must set some CSS for the “a” tag so that HTML doesn’t render any crappy borders/underlines for our links. The last few instructions, basically set what part of our sprite to show for each menu item and have to do for the roll over effect.

Conclusion and Demo

I know this has been quite a long tutorial, but if you take a look at the final product, I am sure you can decide for yourself whether it was worth your time or not. If you have found this tutorial helpful and want to share your views or opinions about it. Please comment below. Any suggestions and tips for a better menu are also welcome!

Related Content:

• Basics to advanced: CSS Tips and Tricks
• Applying CSS to HTML forms