CSS3 Menu

by naveen

HTML

<ul class="buttonGroup">
  <li class="selected">Navigate</li>
  <li>Points</li>
  <li>Lines</li>
</ul>

CSS

.buttonGroup
{
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack:justify;
        -webkit-box-sizing: border-box;
}

.buttonGroup > li
{
        display: block;
        -webkit-box-flex: 1;
        border: solid 1px #9a9a99;
        border-left: none;
        -webkit-border-radius: 0px;
        text-align: center;
        background-image:
                -webkit-gradient(linear, left top, left bottom,
                        from(#fbfbfb),
                        to(#bdbdbd));
        color: #6b6b6b;
        font-size: 16px;
        padding: 10px;
        cursor: pointer;
}

.buttonGroup > li:first-child
{
        border-left: solid 1px #9a9a99;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
}

.buttonGroup > li:last-child
{
        -webkit-border-top-right-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
}

.buttonGroup > li.selected
{
        background-image:
                -webkit-gradient(linear, left top, left bottom,
                        from(#2a55b1),
                        to(#6297f2));
        color: #fff;
            border-color: #193a7f;
    cursor: default;
}

JavaScript

var ul = document.getElementsByTagName("ul");

for(var i=0, j=ul.length; i<j; i++) {
    if ( /\bbuttonGroup\b/.test(ul[i].className) ) {
        ul[i].onclick = segmentedController(ul[i]);
    }
}

function segmentedController(target) {
    return function(event) {
        var li = target.getElementsByTagName("li");
        for (var i=0, j=li.length; i<j; i++) {
            var _ = li[i];
            _.className = _.className.replace(/\bselected\b/, "");
            if (_ === event.target) _.className += " selected"; 
        }
    }
}
/*
$("ul.buttonGroup").click(function (event) {
    $("li", this)
    .removeClass("selected")
    .filter(event.target)
    .addClass("selected");
});
*/