Table nav (Centurion color options)

by agib

HTML

<div class="model-line-nav">
	<div>Basic</div>
	<div class="active">City</div>
	<div>MTB</div>
</div>

CSS

body { font-family: Arial; color:#777; }
div.model-line-nav { display:table; width: 100%; table-layout:fixed; margin:1em; }
div.model-line-nav > div { display:table-cell; border-bottom: 1px solid #BBB; padding:0.5em; margin:0; text-align:center; cursor:pointer; }

.active { border-right: 1px solid #CCC; border-left: 1px solid #BBB; border-top: 3px solid #08C; border-bottom:none !important; color: #333; }

JavaScript

$(".model-line-nav > div").click(function(){
    $(this).siblings().removeClass("active");
    $(this).addClass("active");
});