Overview Here are the required graphics to assembe the menu
1. Main background Open the Photoshop file. Turn off the menu text Layer Group and save the main background as menu-bg.jpg.
2. Button graphics Turn off the background Layer Group and leave only the menu text layers visible. Make a rectangle selection cover the "home" item, go to menu Edit > Copy Merged (Cmd + Shift + C).
Create a new file and take note of the file dimension (w x h), in my case the "home" graphic is 144 x 58px. Paste the "home" graphic in the new file. Go to menu Image > Canvas Size, adjust the image height x 2 (58 + 58 = 116px). Duplicate the home graphic layer and align it to the bottom. Erase the highlight strokes in the upper layer.
Here is how the hover effect will work. We will set the link button to 144 x 58px, when mouseover, we will shift the background image from top to bottom.
Repeat this step for the other buttons. You should have the follow graphics:
3. HTML source When you are done with the graphics, let’s start coding. Start with an un-ordered list <ul>. ● note there is an id="menu" assigned to the<ul> tag ● an unique class name assigned to each link <a> ● an empty <span> tag (the purpose of this is to make the mouseover effect)
Example Source Code [www.52css.com]
