Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let's take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

2. Button graphics

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)

#menu

Reset the menu to no padding, no margin, and no list-style. Specify the width and height same dimension as the menu-bg.jpg. Then attach the menu background image. The key point to remember here is set the position property to relative.

#menu a:hover

When mouseover the link, we want to shift the background image from top to bottom.

#menu a:hover {
background-position: left bottom;
}

#menu a:hover span

When mouseover the link, we want the span element to display:block.

#menu a:hover span {
display: block;
}

#menu .home

Specify the width, height, and background image. Since we already specified all <a> element postition:absolute in previous step, now just say where the .home button should be by specifying the left and top property.

Fantastic tutorial. Really easy to follow and use. I’ll definitely be using some of these techniques on future sites. Thanks!

huckleDec 02, 2007 @ 05:55

I love this tutorial, and the techniques you use are superb.

Just wondering as to why you use two images – one for the circling and one for the supplementary text (like “home” and “who”)? Surely you could of just placed them into a single image that is css-positioned?

so nice, I used the technique already… all in all nice job and excellent.

LisaDec 09, 2007 @ 13:19

There is a problem with having position: absolute for the main div, and position: relative for everything else. In Firefox, Opera and Safari, if you want the div to be flush against the top of the page, it adds a space. The only way to fix this is to make everything the same attribute.
I just found this out the hard way. If you know a workaround, that would be wonderful.