One nifty little use of lists is to create navigation bars with them. The code for this isn’t too onerous, thankfully. depending exactly on what you want to do with your navigation, you will need to ensure that you take note of any differences in rendering between different browsers.
Why exactly? Well, if you give thought to the semantics of a list element: a list is a group of related objects really. Grouping your important links together like this is very useful for computers, spiders and assistive technologies.
The HTML that we’ll need for our link list is very simple:
<ul>
<li><a href=”#”>Link Item 1</a></li>
<li><a href=”#”>Link Item 2</a></li>
<li><a href=”#”>Link Item 3</a></li>
</ul>
That will give us something that looks like this:
We could use that as it is if we liked, but that’d be a bit boring to be honest. You can keep the dots or not; or change them to something else if it takes your fancy. The code to do this is:
li {
list-style-type: none;
}
This will set the bullet to none.You can choose from a number of different bullets, available here.
Depending on the location of our new menu (along the top or in a column to the side), you may want to set the display property to either block or inline. If you want it down the side, set it to block; if you want it across the top (or indeed the bottom), set it to inline. e.g.
li{
display: inline;
}
Clever manipulation of the display element on the UL and LI tags can yield some excellent results. You can also wrap the list in its own div to aid with positioning.
Couple these two, relatively simple lines of code with some hyperlink rollovers and positioning, and you have a very powerful construct for a menu.
