For tonights topic, we’re going to create some Expandable menu’s with css. These can contain links, or just text. You’ll need a basic knowledge of CSS and HTML for editing these. You’ll also need some sort of Photo Editing Software, I personally use Photo Shop CS2.

There are several things going on here, so I will break things down, then at the very end of the post I’ll post the whole code. Also, I’ll include a link to this menu in action.

First, you’re going to need to make 3 Image, a Top, Middle, and Bottom. The sizes you use can be adjusted to suit your needs, here’s the images and sizes I used.

Top Image:

Size: 193 x 46
Middle Image:

Size: 193 x 40
Bottom Image:

Size: 193 x 35

Now comes the fun part, putting it all together. We’ll Start with the top image and it’s CSS attributes.

As you see in the code below, you put the url for your image as the background, with a top left no-repeat attribute. This insures the image starts at the top left, and isn’t repeated. You can toy around with the height here to make it work for your particular image, but I found 30px does great with this sample image.

Next take a look at your font css. This will allow you to change the font of the text within this “header” of your menu. This is usually just 1 line of code. In the example here, I chose the text “Store Categories:” as my header text. You can change your font, sizes, and colors to suit your needs and make it flow with your particular website.

The last part of this is your padding at the top. You can adjust this to suit your needs as well, depending on your background image, and font size. This merely adjusts your “header” down away from the top of the “Header” background image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

dt { 
 
height: 30px;
 
padding-top: 15px;
 
background: url(http://www.millerwebtechnologies.com/gfx/expandtop_sample.gif) 
top left no-repeat;
 
font-size: 1.3em;
 
font-weight: bold;
 
text-align: center;
 
color: #00FF00;
 
}

Next, we’ll address the middle image, which actually holds the “content” of your menu. With the middle image it’s slightly different with the css, as you want the middle image to repeat downward with the content…the more content you have, the longer the middle section will be. So same as before you set the image’s url as the background, but you put it in as top left repeat-y which allows the image to be repeated downward, but not side to side.

Now we’ll talk about the padding. The padding here plays a completely different role. You don’t need padding on the top or bottom of the image because you have your “header” image above, and the closing image below; but you want padding on either side so your text isn’t pushed to the outsides of your image. So, here’s what you do, set your padding to 0 for top and bottom, and set the sides to 20px. You can of course adjust this to your liking depending on your background image as well. You might be ok with less padding, you might need more.

Set your Text alignment to Justify, pic your color for your text within the “content” section, and you’re all done with the “content” section of your menu.

1
2
3
4
5
6
7
8
9
10
11
12

dd {
 
padding: 0 20px 0 20px; 
 
text-align: justify;
 
background: url(http://www.millerwebtechnologies.com/gfx/expandmid_sample.gif) 
top left repeat-y; 
 
color: #FFFFFF;
 
}

Now comes your “footer” or bottom image. This one is pretty simple. You set the image as a background once again. You want the alignment to be bottom left no-repeat. Then set the padding to padding-bottom to keep your content text away from the bottom of your image. See, quick simple and easy for this one.

1
2
3
4
5
6
7
8

dl { 
 
background: url(http://www.millerwebtechnologies.com/gfx/expandbtm_sample.gif)
bottom left no-repeat;
 
padding-bottom: 30px; 
 
}

Now that we have the images in place we can talk about the other elements. I chose to have this menu 50px from the left, 25px from the top, and the width is 194px to contain your image.

1
2
3
4
5
6
7
8
9

dl { 
 
left: 50px;
 
top: 25px;
 
width: 194px; 
 
}

You want to make sure all 3 images line up so you need to set the overall margin and padding to 0. You do so like this:

1
2
3
4
5
6
7

dl, dt, dd { 
 
margin: 0;
 
padding: 0;
 
}

And that should take care of all the CSS elements of your Expandable Menu created with CSS. Below is what all the CSS put together in your stylesheet should look like.

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

 
dl { 
 
left: 50px;
 
top: 25px;
 
width: 194px; 
 
}
 
 
 
dl, dt, dd { 
 
margin: 0;
 
padding: 0;
 
}
 
 
 
dl { 
 
background: url(http://www.millerwebtechnologies.com/gfx/expandbtm_sample.gif)
bottom left no-repeat;
 
padding-bottom: 30px; 
 
}
 
 
 
dt { 
 
height: 30px;
 
padding-top: 15px;
 
background: url(http://www.millerwebtechnologies.com/gfx/expandtop_sample.gif) 
top left no-repeat;
 
font-size: 1.3em;
 
font-weight: bold;
 
text-align: center;
 
color: #00FF00;
 
}
 
 
 
dd {
 
padding: 0 20px 0 20px; 
 
text-align: justify;
 
background: url(http://www.millerwebtechnologies.com/gfx/expandmid_sample.gif) 
top left repeat-y; 
 
color: #FFFFFF;
 
}

Now for the HTML part of this menu. This part is really simple. There’s really one 3 parts to it on the HTML side. The DL tag starts your menu much like the TABLE tag does for starting a table. Next is your DT tag. This is your “header” we talked about above. Inside your DT tag, you put the heading of your menu. Then comes the DD tag. This is your “content” area. This is where you put your links, or text whichever you’ve created this expandable menu block for. Close your DD tag, then your DL tag, and you’re done. Below is what the HTML will look like.
HTML:

1
2
3
4
5
6
7
8
9
10
11

<dl>
<dt>Store Categories:</dt>
<dd><br>
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Banners&amp;xm=on">Banner Graphics</a><br>
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Dedicated_Servers&amp;xm=on">Dedicated Servers</a><br>
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Hosting&amp;xm=on">Hosting Solutions</a><br>
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Reseller_Packages&amp;xm=on">Reseller Hosting</a><br>
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Business_Site_Services&amp;xm=on">Website Developer Solutions</a>
</dd>
 
	</dl>

Here’s what your Menu Should look like if you created it properly.

To see the menu in action in various ways visit Miller Web Technologies