Index > CSS Tutorials > Custom Menu Tutorial

Creating a CSS menu

This tutorial will teach you how to make a CSS menu with roll over effects. It will go over both horizontal and vertical menus.

HTML: The set up

First we need to make a set up of HTML to be stylized by the CSS. What you do is make a div and put the links of your menu inside of it.

<div id="menu">
<a href="URL">Link</a>
<a href="URL">Link</a>
<a href="URL">Link</a>
<a href="URL">Link</a>
</div>

And this is how it will look:

CSS: Background and size

Now I want the background of my menu to be gray, so I am going to add a gray background to the links.

background: #111111;

So now in my CSS I have:

div#menu a{
background: #111111;
}

And this is how it will look:

It's not very pretty and doesn't even look anything like how I want it. I want them to be wider and taller. I want them to be 88 pixels wide and 33 pixels tall, so I'll do that.

div#menu a{
background: #111111;
height: 33px;
width: 88px;
Display: block;
}

And this is how it will look:

If you want the menu to be horizontal you must add:

float: left;

So your overall CSS would look like this for horizontal menus:

div#menu a{
background: #111111;
height: 33px;
width: 88px;
Display: block;
float: left;
}

And this is how it will look:

CSS: Positioning text

Next I want the link name to be pushed down so it in the center of the menu. To do this I use padding. I'm going to continue this tutorial with a vertical menu. Now I have to add:

padding-top: 13px;

And since I want to center it I'll also add:

text-align: center;

So your overall CSS would look like this for vertical menus:

div#menu a{
background: #111111;
height: 28px; *I had to subtract the padding from the height to even it out.
width: 88px;
Display: block;
padding-top: 5px;
text-align: center;
}

And this is how it will look:

CSS: Final touches

I don't want the text to be underlined so I added:

text-decoration: none;

I want the link to be a dark grey but when hovered on I want to to lighten up to white so it looks like it is lit up so I added:

color: #CCCCC;

and the following to a new selector, div#menu a:hover:

color: #FFFFFF;

So your overall CSS would look like this for vertical menus:

div#menu a{
background: #111111;
height: 28px; *I had to subtract the padding from the height to even it out.
width: 88px;
Display: block;
padding-top: 5px;
text-align: center;
color: #AAAAAA;
}
div#menu a:hover{
color: #FFFFFF;
}

And this is how it will look:

And now the last thing I want to do is add a margin so that the links are separated. To do this I add:

margin-bottom: 3px;

So your overall CSS would look like this for vertical menus:

div#menu a{
background: #111111;
height: 28px; *I had to subtract the padding from the height to even it out.
width: 88px;
Display: block;
padding-top: 5px;
text-align: center;
color: #AAAAAA;
margin-bottom: 3px;
}
div#menu a:hover{
color: #FFFFFF;
}

And this is how it will look:

If you would like to add a background image add the following to your CSS:

background: url(IMAGEURL);

You can change the properties of the background based on the image you're using. It's best to have an image that fits perfectly in the size of the link. For this use:

background: url(IMAGEURL) no-repeat;

You can add other things to your CSS to stylized the links such liked borders, positioning, padding. Anything you want to get the desired look you are aiming for. Have fun! If you have any questions feel free to contact me

Sitemap | Copyright 2008 Demoria.net