nuTabs.js 1.1

by Oski Krawczyk

HTML

<script src="http://github.com/oskarkrawczyk/nuTabs/raw/master/Source/nuTabs.js"></script>
<ul id="tabs-nav">
    <li class="selected"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>

<ul id="tabs-body">
    <li class="active">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae arcu et tellus imperdiet pretium. Pellentesque consectetur posuere massa, ut varius lacus vulputate et. Nulla facilisi. Donec semper lorem nec felis ullamcorper imperdiet. Quisque vitae pharetra mi</li>
    <li>Sed euismod laoreet aliquet. Ut id turpis vestibulum tellus rhoncus hendrerit at non diam</li>
    <li>Quisque feugiat, ante vitae pharetra consequat, lorem elit varius arcu, at vulputate nulla magna eu urna. Quisque vitae lacus vel quam pulvinar cursus. Nam sollicitudin cursus interdum. Nam velit orci, gravida aliquet volutpat eu, aliquet sit amet sem. Suspendisse potenti. Praesent sagittis aliquet diam. Nullam leo felis, feugiat at aliquet sed, egestas vel urna. Donec et tristique massa. Praesent in augue sed ipsum mattis auctor eget in justo. Sed non felis id enim fringilla facilisis ut nec purus. Phasellus iaculis ornare luctus</li>
</ul>

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: .8em;
    line-height: 140%;
    background: #C7C3C2;
}

#tabs-nav {
    height: 30px;
}

    #tabs-nav li {
        float: left;
        padding: 0 10px 0 0;
    }

    #tabs-nav li a {
        color: #333;
        font-weight: bold;
        text-decoration: none;
        text-shadow: 0 1px 0 #fff;
        font-size: 1.1em;
        padding: 5px 7px 3px;
    }

    #tabs-nav li.selected a {
        background: #333333;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-bottom: solid 1px #fff;
        color: #C7C3C2;
        text-shadow: none;
    }

#tabs-body {
    position: relative;
    overflow: hidden;
    background: #333333;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-bottom: solid 1px #fff;
}
 
    #tabs-body li {
        padding: 10px;
        color: #fff;
        display: none;
    }
 
    #tabs-body li.active {
        display: block;
    }

JavaScript

$$('#tabs-nav a, #tabs-body li').tabify({
    transition: 'bounce:out'
});