Super simple navigation menu

Here is a super simple navigation bar. Customize it for your site, with colors and fonts.
This is just a super simple base recipe:

First the html:

[code language=”html”]
<ul class="menubar">
<li><a href="#">hem</a></li>
<li><a href="#">info</a></li>
<li><a href="#">tjänster</a></li>
<li><a href="#">kontakt</a></li>
</ul>
[/code]

We end up with this as our base structure:

Then the CSS:
We start by setting the ul element margin and padding to zero. Unless you need some other values. This is just to make sure we don’t get any freaky rogue pixels messing with the menu.

[code language=”css”]
.menubar
{
margin: 0;
padding: 0;
}
[/code]

Then set the list objects to float to the left, instead of stacking like a vertical list. We also set the list-style to none, to remove the list dots. Last we set every list object to have the width of 25% of the containing element. This is because we have four buttons. If we add one we need to make it 20%. This may of course be set to a certain pixel amount (i.e. width: 200px)

[code language=”css”]
.menubar li
{
float: left;
list-style:none;
width: 25%;
}
[/code]

This is what we’ve got now:

The buttons will highlight and be clickable because they are actually hyperlinks. So we set the hyperlinks to display as blocks with 5px padding around the text. Also, we remove the text-decoration. We don’t want the button texts to be underlined. We also set the color and background color of the buttons.

[code language=”css”]
.menubar li a
{
background-color: grey;
color: white;
display: block;
padding: 5px;
text-decoration:none;
}
[/code]

The last bit is to make sure the buttons shift background color when the user hover over them.

[code language=”css”]
.menubar li a:hover
{
background-color: red;
}
[/code]

Now we have working navigation bar:

If you want to add borders, change fonts, center text etc.  Do that to the a-elements. That way you won’t have to keep track of every single pixel. The li-elements will stay at 25% even if you add borders to the a-elements:

[code language=”css”]
.menubar li a
{
background-color: grey;
color: white;
display: block;
text-decoration:none;

border: solid 1px #999;
text-align:center;
}
[/code]

The final result looks like this:

Here’s the full HTML and CSS:

HTML

[code language=”html”]
<ul class="menubar">
<li><a href="#">hem</a></li>
<li><a href="#">info</a></li>
<li><a href="#">tjänster</a></li>
<li><a href="#">kontakt</a></li>
</ul>
[/code]

CSS

[code language=”css”]
.menubar
{
margin: 0;
padding: 0;
}

.menubar li
{
float: left;
list-style:none;
width: 25%;
}

.menubar li a
{
background-color: grey;
color: white;
display: block;
text-decoration:none;
border: solid 1px #999;
text-align:center;
}

.menubar li a:hover
{
background-color: red;
}
[/code]