When visiting other websites I quite like to have a peek in the code to see how the developers make the sites look how they look.

One of the things I’ve had trouble with in the past is horizontal navigation menus, more precisely the styling side of things and how the HTML should be for content and the CSS for the presentation.

What I’m trying to get at is in these sites most of them have a header navigation like this

MenuItem 1 | MenuItem 2 | MenuItem 3

And these menus are normally coded like this

<ul>
<li><a href="page_1.html">MenuItem 1</a></li>
<li>|</li>
<li><a href="page_2.html">MenuItem 2</a></li>
<li>|</li>
<li><a href="page_3.html">MenuItem 3</a></li>
</ul>

And styled like this

ul li {
padding: 0 5px;
}

With a menu like this its not separating the content from the presentation, so what I came up with for this blog is to use CSS’s pseudo classes to add the “|” to the end of each menu item then remove the last one.

The HTML for this method keeps the code clean and the style separate

<ul>
<li><a href="page_1.html">MenuItem 1</a></li>
<li><a href="page_2.html">MenuItem 2</a></li>
<li><a href="page_3.html">MenuItem 3</a></li>
</ul>

The style in this method is as follows

ul li {
list-style:none;
display:inline;
float:left;
margin:0 5px 0 0;
}

ul li:after {
content:"|";
margin:0 0 0 5px;
}

ul li:last-child:after {
content:"";
}

The first bit ul li is the basic CSS to make the navigation menu horizontal, I’ll get back to the margins at the end.

The ul li:after section selects each ul li element and puts a “|” after it this results in a menu like this

MenuItem 1 | MenuItem 2 | MenuItem 3 |

Which you may have noticed there is a “|” at the end of the last menu item.

This is where the last part of the CSS comes in

ul li:last-child:after {
content:"";
}

This selects the last child <li><a href="page_3.html">MenuItem 3</a></li> and removes the “|” after it, resulting in a nice horizontal navigation that separates the styling from the content.

Now margins, I originally had the margins like this

ul li:after {
content:"|";
margin:0 5px 0 5px;
}

but with them only on the :after pseudo element I had problems with there being no gaps between each menu item and the “|” when I tested it in IE where it doesn’t understand most pseudo elements so I had give the ul li a 5px right margin and the ul li:after element a 5px left margin to keep IE happy and for it to look the same in modern browsers.