exscale.se

Creating Pipe-Separated Menus with Unordered Lists

Published Sunday, May 27, 2007 in (X)HTML, CSS, Semantics, Web Standards

Pipe-separated menus are quite common over the internet, especially for footer-navigations.
As we all know, menus are simply lists of links and should therefore be marked up as such. Even so you see plenty of footer-navigations that are marked up with nothing more than the paragraph-element and the separating character is actually in the source code.
Thanks to the :after pseudo-element we can add the separator using CSS, and it's very simple.

The HTML

<ul id="footer-navigation">
    <li><a href="#">Top</a></li>
    <li><a href="#">Valid XHTML</a></li>
    <li><a href="#">Valid CSS</a></li>
    <li><a href="#">Get Firefox</a></li>
</ul>

The CSS

#footer-navigation {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

    #footer-navigation li {
        display: inline;
    }

    #footer-navigation li:after {
        content: " | ";
    }

    #footer-navigation li:last-child:after {
        content: "";
    }

That CSS simply says that there should be a " | " after every li in the list but the last one.
You can of course use any character you want.

Aron

Wednesday, June 13, 2007 | View all comments by Aron

does not work in ie 6

Ante

Wednesday, June 13, 2007 | View all comments by Ante

Doesn't work in any IE version as far as i know. But i'm all for using the latest techniques and letting people who choose to use a crappy browser have a crappier experience.

If more people did that less people would be using IE.