inline tabs

by Zuhaib Siddiqui

HTML

<ul class="nav-tab">
<li>Zuhaib</li>
<li>Siddiqui</li>
<li>Zuhaib</li>
<li>Siddiqui</li>
<li>Zuhaib</li>
<li>Siddiqui</li>
<li>Zuhaib</li>
<li>Siddiqui</li>
</ul>

CSS

.nav-tab{
  white-space: nowrap;
  margin:0px;
  padding:0px;
  margin-top:15px;
  border:2px solid #f00;
  width:450px;
  float:left;
  display:block;
}
.nav-tab > li{
  display:inline-block;
  padding:10px;
  border:1px solid;
}

JavaScript

$.fn.extend({
    stripeMe: function(options) {
        var defaults = {
            className: 'dark',
            pseudoSort: ':even'
        };
        options = $.extend(defaults, options);
        this.each(function() {
            $(this).children(options.pseudoSort).addClass(options.className);
        });
        return this;
    }
});
  
$('.nav-tab').stripeMe();