"Full Width Tabs "
Bootstrap 3.3.0 Snippet by sshelzi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<header class="clearfix">
<span>Blueprint <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span></span>
<h1>Responsive Full Width Tabs</h1>
<nav>
<a href="http://tympanus.net/Blueprints/SplitLayout/" class="bp-icon bp-icon-prev" data-info="previous Blueprint"><span>Previous Blueprint</span></a>
<a href="#" class="bp-icon bp-icon-next" data-info="next Blueprint"><span>Next Blueprint</span></a>
<a href="#" class="bp-icon bp-icon-drop" data-info="back to the Codrops article"><span>back to the Codrops article</span></a>
<a href="#" class="bp-icon bp-icon-archive" data-info="Blueprints archive"><span>Go to the archive</span></a>
</nav>
</header>
<div id="tabs" class="tabs">
<nav>
<ul>
<li><a href="#section-1" class="icon-shop"><span></span></a></li>
<li><a href="#section-2" class="icon-cup"><span>Drinks</span></a></li>
<li><a href="#section-3" class="icon-food"><span>Food</span></a></li>
<li><a href="#section-4" class="icon-lab"><span>Lab</span></a></li>
<li><a href="#section-5" class="icon-truck"><span>Order</span></a></li>
</ul>
</nav>
<div class="content">
<section id="section-1">
<div class="mediabox">
<img src="http://tympanus.net/Blueprints/FullWidthTabs/img/01.png" alt="img01" />
<h3>Sushi Gumbo Beetroot</h3>
<p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p>
</div>
<div class="mediabox">
<img src="http://tympanus.net/Blueprints/FullWidthTabs/img/02.png" alt="img02" />
<h3>Pea Sprouts Fava Soup</h3>
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon/icomoon.eot?pvm5gj');
src:url('../fonts/icomoon/icomoon.eot?#iefixpvm5gj') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.woff?pvm5gj') format('woff'),
url('../fonts/icomoon/icomoon.ttf?pvm5gj') format('truetype'),
url('../fonts/icomoon/icomoon.svg?pvm5gj#icomoon') format('svg');
font-weight: normal;
font-style: normal;
} /* Icons created with icomoon.io/app */
.tabs {
position: relative;
width: 100%;
overflow: hidden;
margin: 1em 0 2em;
font-weight: 300;
}
/* Nav */
.tabs nav {
text-align: center;
}
.tabs nav ul {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
.tabs nav ul li {
border: 1px solid #becbd2;
border-bottom: none;
margin: 0 0.25em;
display: block;
float: left;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//**
* cbpFWTabs.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2014, Codrops
* http://www.codrops.com
*/
;( function( window ) {
'use strict';
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function CBPFWTabs( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}
CBPFWTabs.prototype.options = {
start : 0
};
CBPFWTabs.prototype._init = function() {
// tabs elemes
this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: