Options nav

Original:http://jsfiddle.net/csswizardry/z3H2Z/

by Jens Grochtdreis

HTML

<ul class="nav options">
    <li class=current><a href=#>Male</a></li>
    <li><a href=#>Female</a></li>
</ul>

CSS

/* Housekeeping */
html{
    font:0.75em/1.5 "Helvetica Neue", Arial, sans-serif;
}
a{
    text-decoration:none;
}
    a:hover{
        text-decoration:underline;
    }

/* Clearfix */
.cf:before,
.cf:after,
.nav:before,
.nav:after{
    content:"";
    display:table;
}
.cf:after,
.nav:after{
    clear:both;
}
.cf,
.nav{
    zoom:1;
}

/* Nav abstraction */
.nav{
    list-style:none;
    margin-left:0;
    padding:0;
}
    .nav li{
        display:inline;
    }
        .nav a{
            display:inline-block;
        }

/* Options */
.options{
    line-height:1;
}
    .options li{
        float:left;
    }
        .options a{
            display:block;
            padding:0.75em; /* Set in ems to scale with font-size. */
            color:#333;
            border:1px solid #ccc;
            border-left:none;
            background-color:#eee;
        }
        .options li:first-child a{
            /* We need to add in an extra border on the first item. */
            border-left:1px solid #ccc;
            -moz-border-radius:5px 0 0 5px;
            -webkit-border-radius:5px 0 0 5px;
            border-radius:5px 0 0 5px;
        }
        .options li:last-child a{
            -moz-border-radius:0 5px 5px 0;
            -webkit-border-radius:0 5px 5px 0;
            border-radius:0 5px 5px 0;
        }
        .options .current a{
            position:relative;
            text-decoration:underline;
            cursor:text;
            color:#fff;
            background:#666;
            border-color:#666;
            
            -moz-box-shadow:0 0 0.5em rgba(0,0,0,0.25) inset;
            -webkit-box-shadow:0 0 0.5em rgba(0,0,0,0.25) inset;
            box-shadow:0 0 0.5em rgba(0,0,0,0.25) inset;
        }
        .options li:first-child.current a{
            /* Make sure we also change the colour of the extra border... */
            border-left-color:#666;
        }
            .options .current a:after{
                content:"";
               ...

JavaScript

/*

This looks like an unwieldy amount of CSS but:

1) The HTML is tiny. The CSS only needs writing once and you can build as many of these components as you like just by writing a small amount of markup. Try making one of these for days of the week...

2) This is a very robust build. A lot of, if not all, bases are covered. This should prove quite difficult to break (within reason).

3) It also contains a lot of styling. Remove a lot of the styling and the CSS would be actually pretty small :)

*/