This tutorial shows how to create a simple horizontal menu using XHTML and CSS. In the end this is what we will end up with:
1. The goal in all CSS/XHTML layouts is to keep the HTML to a minimum. First let's set up the minimum HTML code that we will need, note that according to Web 2.0 standards, all menus are created using the <ul> tag:
Code:
<ul id="Menu"> <li><a href="">Button 1</a></li> <li><a href="">Button 2</a></li> <li><a href="">Button 3</a></li> </ul> |
Preview: |
2. Right now it just looks like a list. So let's remove the list styling using CSS. This removes the list element dots and the extra list spacing (by default <ul> has margin-left set to 10px and padding is set to 8px).
Code:
<style>
#Menu {
list-style: none;
margin: 0;
padding: 0;
}
</style>
<ul id="Menu">
<li><a href="">Button 1</a></li>
<li><a href="">Button 2</a></li>
<li><a href="">Button 3</a></li>
</ul>
|
Preview: |
3. Now let's align the list elements horizontally using the float style. Depending on how you want your menu arranged, you can float it left or right.
Code:
<style>
#Menu {
list-style: none;
margin: 0;
padding: 0;
}
#Menu li{
float: left;
}
</style>
<ul id="Menu">
<li><a href="">Button 1</a></li>
<li><a href="">Button 2</a></li>
<li><a href="">Button 3</a></li>
</ul>
|
Preview: |
4. In order to turn the links into buttons we need to set it's display property to block. This will allow us to regulate its width and height. After which we can give it some styling. Note that the href property in the link must be set for this to work.
Code:
<style>
#Menu {
list-style: none;
margin: 0;
padding: 0;
}
#Menu li{
float: left;
}
#Menu li a {
background: #DDD;
border: 0;
color: #000;
display: block;
font-size: 11px;
height: 24px;
width: 90px;
}
</style>
<ul id="Menu">
<li><a href="">Button 1</a></li>
<li><a href="">Button 2</a></li>
<li><a href="">Button 3</a></li>
</ul>
|
Preview: |
5. Align the text vertically using the line-height style, and horizontally using the text-align style.
Code:
<style>
#Menu {
list-style: none;
margin: 0;
padding: 0;
}
#Menu li{
float: left;
}
#Menu li a {
background: #DDD;
border: 0;
color: #000;
display: block;
font-size: 11px;
height: 24px;
line-height: 24px;
text-align: center;
width: 90px;
}
</style>
<ul id="Menu">
<li><a href="">Button 1</a></li>
<li><a href="">Button 2</a></li>
<li><a href="">Button 3</a></li>
</ul>
|
Preview: |
6. Now we can create some more styling on the button by giving the list elements a border and a background color and then setting a 1px margin on the buttons.
Code:
<style>
#Menu {
list-style: none;
margin: 0;
padding: 0;
}
#Menu li{
background: #FFF;
border: 1px solid #999;
float: left;
}
#Menu li a {
background: #DDD;
border: 0;
color: #000;
display: block;
font-size: 11px;
height: 24px;
line-height: 24px;
margin: 1px;
text-align: center;
width: 90px;
}
</style>
<ul id="Menu">
<li><a href="">Button 1</a></li>
<li><a href="">Button 2</a></li>
<li><a href="">Button 3</a></li>
</ul>
|
|
Preview: |
7. Now we can apply the hover style on the button to change the way they look when you move your mouse over them.
Code:
<style>
#Menu {
list-style: none;
margin: 0;
padding: 0;
}
#Menu li{
background: #FFF;
border: 1px solid #999;
float: left;
}
#Menu li a {
background: #DDD;
border: 0;
color: #000;
display: block;
font-size: 11px;
height: 24px;
line-height: 24px;
margin: 1px;
text-align: center;
width: 90px;
}
#Menu li a:hover {
background: #222;
color: #CC9900;
}
</style>
<ul id="Menu">
<li><a href="">Button 1</a></li>
<li><a href="">Button 2</a></li>
<li><a href="">Button 3</a></li>
</ul>
|
|
Preview: |
8. To get rid of the extra borders in the buttons in the middle, we will need to give all buttons an id and then remove the borders per id.
Code:
<style>
#Menu {
list-style: none;
margin: 0;
padding: 0;
}
#Menu li{
background: #FFF;
border: 1px solid #999;
float: left;
}
#Menu li a {
background: #DDD;
border: 0;
color: #000;
display: block;
font-size: 11px;
height: 24px;
line-height: 24px;
margin: 1px;
text-align: center;
width: 90px;
}
#Menu li a:hover {
background: #222;
color: #CC9900;
}
#Menu li#Button2,
#Menu li#Button3 {
border-left: 0;
}
</style>
<ul id="Menu">
<li id="Button1"><a href="">Button 1</a></li>
<li id="Button2"><a href="">Button 2</a></li>
<li id="Button3"><a href="">Button 3</a></li>
</ul>
|
|
Preview: |
9. And you're done.