Basic CSS menu design
Author: Nediam <javier@nediam.com.mx>
Publication date: 2004-09-22
To take full advantage of this tutorial the reader should have previous knowledge of CSS (and HTML of course HTML :)). Otherwise it is advisable that you first look through the material on W3Schools http://www.w3schools.com/css/ or any other reference on CSS.
In this tutorial I will explain how to make a simple menu using CSS only. This type of menu is useful when your webpage has only a few sections, in other words, if submenus are not necessary. Check out, for example, this
horizontal menu and this
vertical
one. Basically, there are two ways of doing this: with tables or with unordered lists. In this tutorial I will explain how to create menus using HTML tables, as I think it is simpler this way compared to using lists.
First of all we will write the HTML text with no CSS. Continuing with the example of the horizontal menu, the HTML would be like
this, and would display
this. If we analyze the HTML code we will note that there is only a simple table and the background color is gray (nothing new).
Next we will add some CSS to the page, especially to the <a>, element, known as the anchor, which serves to define links within our HTML pages. Within the <head> of our code, we will add the following CSS tags:
<style type="text/css">
a.menu
{
color: #1F3C77;
font-family: Arial;
font-size: 10pt;
text-decoration: none;
text-align: center;
border-style: solid;
border-width: 1px;
display: block;
padding: 2px;
width: 100px;
}
a.menu:link, a.menu:visited
{
background-color: #E6E6E6;
}
</style>
We are creating a class called menu for the <a> element, and also defining the style of the pseudo-classes link and visited. I think all the CSS properties are actually very clear, so I will not explain the function of each one. If you have any doubts please consult a CSS reference. What we will go into is that in this case we are applying the styles of the pseudo-classes only to the links that specify the class 'menu' (a.menu:link, a.menu:visited). Speaking of which, our next item in this example is to specify to our HTML links that use the style of the class 'menu'. This is done with the class attribute, which we will put inside all <a> elements. Thus the first two links in our example will look like this:
<a class='menu' href='#'>HOME</a>
<a class='menu' href='#'>OPTION 1</a>
Taking all this into account, the HTML code so far would look something like
this
, and our menu would look like
this.
It looks much better now that we have introduced some CSS! If we analyze the code we can see that the only thing we did was stylize the links. What we need now is to create the effect of an option changing color when the mouse passes over it. This will be done with another pseudo-class known as hover. In this class we will specify that we want a different background and font color when the mouse goes over an option in the menu. We will add this rule at the end of our CSS definition:
a.menu:hover
{
background-color: #2B486C;
color: #FFF;
}
And that's all!. Our final HTML code would be
this
, and the menu would look like
this.
This is the end of this short tutorial. As you can see, it is very easy to create this type of menus. We may have thought before that it is very difficult to create this type of menus and that it can only be achieved using Fireworks, but we have just seen how they can be created using CSS only, avoiding so many images and lines of thrash generated by Fireworks.
If you have any questions or comments regarding this tutorial send them to <javier@nediam.com.mx>
Greetings to Ferruca, who helped me get the hosting, and to Imoq, who gave me the receipt.
References:
- CSS Tutorial - http://www.w3schools.com/css/
The latest version of this document is available at: http://nediam.com.mx/en/tutorials/css_menus_basic/index.php