posted on 31 March 2013

0 comments

Semantically incorporate seperators in Menus

TAGS: Accessibility,Browsers,CSS3,HTML5,Web

Just a short blog today to let you know of the best way to implement your navigation menus when they look like the following:

Example menu with pipeline dividers

Hopefully it's obvious that this should be written semantically from an HTML point of view using UL and LI tags. Hide the list decorations, float the required elements and there you have it.

However, I have to confess I have always previously used the pipe bar character (numerical code |) to do the separators. I didn't want to use borders or background images because I didn't want to have to target the first or last LI with a separate class name. It seemed a clunky way of doing it.

Today however, a CSS expert over at one of the forums I frequent (csscreator.com) mentioned using the CSS selector :last-child which although I'd always known about, I'd avoided owing to its lack of browser support. I came back to him with this compatibility table from Quirks Mode (quirksmode.org).

Compatibility table showing last child only works IE9+ but first child works IE7+

Obvious solution then (thanks Gary) would just be to give everything a left hand border and use the first-child selector to turn it off on the far left element. Of course this is on the assumption IE6 isn't an issue (I don't even consider 5.5 a browser anymore) and IE7 won't work if this menu needs to adapt within the page without a page reload.

I feel particularly good about this approach since it was highlighted that using the pipe bar character in the HTML, despite contradicting the number one rule of semantic web code (keep the visual styling and the content completely separate) meant that menus done like this are extremely annoying for screen reader users who would presumably have to hear ever separator read out to them!

Please excuse the embedded styles used only to simplify the example code.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example Menu</title>
        <style type="text/css">
            ul.nav, ul.nav li
            {
                float: left;
            }
            
            ul.nav
            {
                list-style-type: none;
            }
            
            ul.nav li
            {
                margin-left: 15px;
                padding-left: 15px;
                border-left: solid 1px red;
            }
            
            ul.nav li:first-child
            {
                border-left: none;
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </body>
</html>

Hope this helps, please come back to me with any questions you might have!

John

John manages the Frontend team, working hard to ensure testing and standards are kept high and his team are all up to date with the latest best practices etc. He’s a keen frontender himself, specialising in pixel perfect layouts and cross browser compatibility. He also has a love for playing around in Photoshop though more and more is enjoying the project management side of things.

Find out more about John here.

0 comments

add your comment

Email me when other users reply