Semantic (Vertical) CSS Block Navigation
A major part of web standards involves using mark-up (HTML or XHTML) for its intended purpose instead of purely to style pages. Part of this involves using lists to control navigation, because that's exactly what navigation is — a list of links.
Unfortunately, while some of us are customising unordered lists with CSS there are others creating bad tutorials teaching people how to hack unnecessary coding to create bloated lists which completely defeats the point of using them in the first place — an absolute waste of time.
If you've got a CSS navigation list that is controlled by <div>s, <span>s or <br />s — you're doing it wrong. This tutorial is going to help you fix that. First of all let's look at your navigation right now. It propably looks like this:
<a href="me.html">About Me</a><br />
<a href="you.html">For You</a><br />
<a href="site.html">Site Info</a><br />
<a href="links.html">Links</a><br />
Which displays like this (these links are examples and do not work):
About Me
For You
Site Info
Links
To make this semantically correct we need to place the links in a list. My list of choice is unordered, because there is no specific numerical (or others) order to the links:
<ul>
<li><a href="me.html">About Me</a></li>
<li><a href="you.html">For You</a></li>
<li><a href="site.html">Site Info</a></li>
<li><a href="links.html">Links</a></li>
</ul>
Although we could theoretically leave the navigation like this now and still have "correct" navigation, it is quite boring and the additional margins added by default will probably give your navigation an undesired appearance as shown below:
To combat this we first need to assign the <ul> an id — this is 'called' in the CSS and customised appropriately. Here is my unordered list with an id:
<ul id="navigation">
...etc...
</ul>
Now in the stylesheet we can start to customise the appearance of the navigation. First, we will get rid of the default margins/paddings assigned by the browser, and then we'll remove the 'bullets' which are quite ugly, really.
#navigation {
margin: 0;
padding: 0;
list-style-type: none;
}
Now our navigation list looks like this:
Look familiar? Yes, it's exactly the same as the original list only coded with semantics in mind and presentation separated from content. You may be questioning the point of this if it looks exactly the same. The point is: it doesn't have to look the same. By using <p> and <br />s you'd have had to assign each menu item a class or add several surrounding <div>s to successfully customise the navigation: this is much easier.
Let's go back to our CSS now and add some juicy customisations. Let's say we want a nice background colour for each link — there are two ways to do this. First, we could customise each list item (<li>) or second, we could customise the links inside the list items. The advantage to customising the links is that you can add decent :hover properties which work across all browsers. Anyway, we'll pretend we want a yellow background with dark blue text, so:
We'll take the CSS we have already:
#navigation {...etc...
}
...and add to it:
#navigation a {
background: yellow;
color: #313F57;
}
This gives us the following:
Still somewhat boring. So, we'll make all of the navigational items the same width, give each a little space between the next and add a solid left orange border (width a bit of padding to stop them running into the text):
#navigation {
...etc...
}
#navigation li {
margin-bottom: 2px;
}
#navigation a {
background: yellow;
color: #313F57;
display: block;
width: 150px;
border-left: 5px solid orange;
padding-left: 10px;
}
The display: block; forces the links to render as a block element thus allowing only the link on that line and also allows us to control the width. The rest are self-explanitory.
The above coding gives us the following:
Aha! Much more exciting. Consistant, easy to use and somewhat better than a simple list of text. Now for something even better — a change when the user positions his/her mouse over the top of each navigation item:
#navigation {
...etc...
}
#navigation li {
...etc...
}
#navigation a {
...etc...
}
#navigation a:hover {
background: orange;
color: maroon;
text-decoration: none;
border-left: 5px solid yellow;
}
Because we told the browser to display a as a block instead of the pseudo-class a:link, the a:hover pseudo-class will inherit everything from the original CSS (#navigation a { }). This means we only had to customise the things we wanted to change. Our menu now looks like this:
And the coding in full is:
#navigation {
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation li {
margin-bottom: 2px;
}
#navigation a {
background: yellow;
color: #313F57;
display: block;
width: 150px;
border-left: 5px solid orange;
padding-left: 10px;
}
#navigation a:hover {
background: orange;
color: maroon;
text-decoration: none;
border-left: 5px solid yellow;
}
Each property value can be changed to suit your personal needs, and additional properties (such as font: value;) can be added to customise it further. There you have it — a functional and semantically accurate CSS-controlled menu.
Tags:
css, navigation, semantics,
Last Updated On: 09th February 06 by Jem
Bookmark At: StumbleUpon, Digg
Handy Stuff
Downloads
Friends of 'TT'
Resources