- h1 = 'Be your own customer'
- h2 = 'Bolter is built using Foundation 6.'
- p1 = 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores laudantium, totam rem aperiam.'
.cd-tabs
.container
.row
.col-md-12
%nav
%ul.cd-tabs-navigation
<li><a data-content="inbox" class="selected" href="#0">Company</a></li>
<li><a data-content="new" href="#0">Values</a></li>
<li><a data-content="gallery" href="#0">Culture</a></li>
<li><a data-content="store" href="#0">Philosophy</a></li>
%hr
.container
.row
.col-md-12
%ul.cd-tabs-content
%li.selected{:'data-content' => 'inbox'}
.row.content
.col-lg-4.heading
%h1 #{h1}
%p #{h2}
.col-lg-8.text
%p #{p1}
%li{:'data-content' => 'new'}
.row.content
.col-lg-4.heading
%h1 #{h1}
%p #{h2}
.col-lg-8.text
%p #{p1}
%li{:'data-content' => 'gallery'}
.row.content
.col-lg-4.heading
%h1 #{h1}
%p #{h2}
.col-lg-8.text
%p #{p1}
%li{:'data-content' => 'store'}
.row.content
.col-lg-4.heading
%h1 #{h1}
%p #{h2}
.col-lg-8.text
%p #{p1}
View Compiled
.cd-tabs:after {
content: "";
display: table;
clear: both;
}
.cd-tabs:after {
/* subtle gradient layer on top right - to indicate it's possible to scroll */
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 200px;
z-index: 1;
pointer-events: none;
background: -webkit-linear-gradient( right , white, rgba(255, 255, 255, 0));
background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
visibility: visible;
opacity: 1;
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.no-cssgradients .cd-tabs::after {
display: none;
}
.cd-tabs.is-ended::after {
/* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-tabs nav {
overflow: auto;
-webkit-overflow-scrolling: touch;
box-shadow: inset 0 -2px 3px rgba(255, 255, 255, 0.06);
}
.cd-tabs-navigation {
min-width: 480px;
}
.cd-tabs-navigation:after {
content: "";
display: table;
clear: both;
}
.cd-tabs-navigation li {
float: left;
}
.cd-tabs-navigation a {
position: relative;
display: block;
height: 60px;
text-align: center;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
color: #c3c2b9;
padding-top: 34px;
}
.cd-tabs-navigation a.selected {
background-color: #ffffff !important;
box-shadow: inset 0 -2px 0 #598C68;
color: #29324e;
}
.cd-tabs-content {
background: #ffffff;
}
.cd-tabs-content li {
display: none;
}
.cd-tabs-content li.selected {
display: block;
-webkit-animation: cd-fade-in 0.5s;
-moz-animation: cd-fade-in 0.5s;
animation: cd-fade-in 0.5s;
}
.cd-tabs-content li p {
font-size: 14px;
line-height: 1.6;
color: #8493bf;
margin-bottom: 2em;
}
@media only screen and (min-width: 960px) {
.cd-tabs-content {
min-height: 0;
}
}
@-webkit-keyframes cd-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes cd-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes cd-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.cd-tabs-content {
}
hr {
margin: 0;
margin-bottom: 2em;
}
ul {
margin-bottom: 0;
a {
padding-top: 3em;
padding-bottom: 4em;
}
li {
padding: 0 1.5em;
}
}
//TODO Text
.cd-tabs-navigation {
a {
/* COMPANY: */
font-family: Montserrat-SemiBold;
font-size: 11px;
color: #2F2F2F;
letter-spacing: 1px;
text-transform: uppercase;
}
}
.cd-tabs-content h1 {/* Be your own customer: */
font-family: Montserrat-Regular;
font-size: 30px;
color: #2F2F2F;
letter-spacing: 0.2px;
line-height: 40px;
margin-bottom: 0;
margin-top: 0;
}
.cd-tabs-content heading {/* Be your own customer: */
/* font-family: Montserrat-Regular; */
/* font-size: 30px; */
/* color: #2F2F2F; */
/* letter-spacing: 0.2px; */
/* Squarespace is built: */
font-family: Lora-Italic;
font-size: 18px;
color: #4A4A4A;
letter-spacing: 0.22px;
line-height: 34px;
/* line-height: 40px; */
}
.cd-tabs-content .heading p {/* Squarespace is built: */
font-family: Lora-Italic;
font-size: 18px;
color: #4A4A4A;
letter-spacing: 0.22px;
line-height: 34px;
}
.cd-tabs-content .text p {/* Sed ut perspiciatis: */
font-family: OpenSans;
font-size: 14px;
color: #595959;
letter-spacing: 0.3px;
line-height: 24px;
padding-left: 2em;
padding-top: .5em;
}
.cd-tabs-content li {
padding-top: 1em;
}
a:hover,
a:active,
a:focus,
a:visited {
text-decoration: none;
}
.cd-tabs-navigation a.selected {
&, &:hover {
color: green;
}
}
View Compiled
jQuery(document).ready(function($){
var tabs = $('.cd-tabs');
tabs.each(function(){
var tab = $(this),
tabItems = tab.find('ul.cd-tabs-navigation'),
tabContentWrapper = tab.find('ul.cd-tabs-content'),
tabNavigation = tab.find('nav');
tabItems.on('click', 'a', function(event){
event.preventDefault();
var selectedItem = $(this);
if( !selectedItem.hasClass('selected') ) {
var selectedTab = selectedItem.data('content'),
selectedContent = tabContentWrapper.find('li[data-content="'+selectedTab+'"]'),
slectedContentHeight = selectedContent.innerHeight();
tabItems.find('a.selected').removeClass('selected');
selectedItem.addClass('selected');
selectedContent.addClass('selected').siblings('li').removeClass('selected');
//animate tabContentWrapper height when content changes
tabContentWrapper.animate({
'height': slectedContentHeight
}, 200);
}
});
//hide the .cd-tabs::after element when tabbed navigation has scrolled to the end (mobile version)
checkScrolling(tabNavigation);
tabNavigation.on('scroll', function(){
checkScrolling($(this));
});
});
$(window).on('resize', function(){
tabs.each(function(){
var tab = $(this);
checkScrolling(tab.find('nav'));
tab.find('.cd-tabs-content').css('height', 'auto');
});
});
function checkScrolling(tabs){
var totalTabWidth = parseInt(tabs.children('.cd-tabs-navigation').width()),
tabsViewport = parseInt(tabs.width());
if( tabs.scrollLeft() >= totalTabWidth - tabsViewport) {
tabs.parent('.cd-tabs').addClass('is-ended');
} else {
tabs.parent('.cd-tabs').removeClass('is-ended');
}
}
});
