kokimu
5/10/2018 - 6:48 PM
Responsive Tabs
Simple version CSS Responsive Tabbed Navigation | CodyHouse
<div class="cd-tabs">
<div class="tabnav">
<ul class="cd-tabs-navigation">
<li>
<a data-content="arbutus" class="selected" href="#0">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg" alt="Arbutus Cottage">
</a>
</li>
<li>
<a data-content="balsam" href="#0">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg" alt="Balsam Cottage">
</a>
</li>
<li>
<a data-content="cedar" href="#0">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg" alt="Cedar Cottage">
</a>
</li>
<li>
<a data-content="dogwood" href="#0">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg" alt="Dogwood Cottage">
</a>
</li>
<li>
<a data-content="clamshell" href="#0">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg" alt="Clamshell Cottage">
</a>
</li>
</ul> <!-- cd-tabs-navigation -->
</div>
<ul class="cd-tabs-content">
<li data-content="arbutus" class="selected">
<div class="photos">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg">
</div>
<h2>Title</h2>
<p>Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</li>
<li data-content="balsam">
<div class="photos">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg">
</div>
<h2>Title</h2>
<p>Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</li>
<li data-content="cedar">
<div class="photos">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg">
</div>
<h2>Title</h2>
<p>Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</li>
<li data-content="dogwood">
<div class="photos">
</div>
<h2>Title</h2>
<p>Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</li>
<li data-content="clamshell">
<div class="photos">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg">
<img src="http:xxxx/wp-content/uploads/2016/03/xxxx.jpg">
</div>
<h2>Title</h2>
<p>Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</li>
</ul> <!-- cd-tabs-content -->
</div> <!-- cd-tabs -->
<div class="clear"></div>// Responsive Tabs
var tabs = $('.cd-tabs');
tabs.each(function(){
var tab = $(this),
tabItems = tab.find('ul.cd-tabs-navigation'),
tabContentWrapper = tab.children('ul.cd-tabs-content'),
tabNavigation = tab.find('div.tabnav');
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('div.tabnav'));
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');
}
}
// end Responsive Accordion to Tabs
// RESPONSIVE TABS
// *, *::after, *::before {
// -webkit-box-sizing: border-box;
// -moz-box-sizing: border-box;
// box-sizing: border-box;
// }
// *::after, *::before {
// content: '';
// }
.cd-tabs {
position: relative;
}
.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: 50px;
z-index: 1;
pointer-events: none;
background: -webkit-linear-gradient( right , #f8f7ee, rgba(248, 247, 238, 0));
background: linear-gradient(to left, #f8f7ee, rgba(248, 247, 238, 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;
background: #f8f7ee;
box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
}
.cd-tabs-navigation {
margin: 0;
&:after {
content: "";
display: table;
clear: both;
}
li {
float: left;
width: 19.2%;
margin-right: 1%;
@include bp(736up) {
width: 19.2%;
}
&:last-child {margin-right: 0;};
}
a {
position: relative;
display: block;
height: 100%;
width: 100%;
text-align: center;
font-size: 12px;
font-size: 0.75rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 700;
padding-top: 3px;
line-height: 0;
// color: #c3c2b9;
// padding-right: 10%;
@include bp(736up) {
padding-top: 5px;
}
img {
margin: 0;
@include bp(736up) {width: 130px;}
@include bp(768up) {width: 141px;}
}
}
a.selected {
-webkit-box-shadow: inset 0 3px 0 $accent-color;
box-shadow: inset 0 3px 0 $accent-color;
@include bp(736up) {
-webkit-box-shadow: inset 0 5px 0 $accent-color;
box-shadow: inset 0 5px 0 $accent-color;
}
color: #29324e;
}
}
.no-touch .cd-tabs-navigation a:hover {
color: #29324e;
background-color: rgba(233, 230, 202, 0.3);
}
.cd-tabs-navigation a::before {
/* icons */
position: absolute;
top: 12px;
left: 50%;
margin-left: -10px;
display: inline-block;
// height: 20px;
// width: 20px;
background-image: url("../img/vicons.svg");
background-repeat: no-repeat;
}
.cd-tabs-navigation a[data-content='inbox']::before {
background-position: 0 0;
}
.cd-tabs-navigation a[data-content='new']::before {
background-position: -20px 0;
}
.cd-tabs-navigation a[data-content='gallery']::before {
background-position: -40px 0;
}
.cd-tabs-navigation a[data-content='store']::before {
background-position: -60px 0;
}
.cd-tabs-navigation a[data-content='settings']::before {
background-position: -80px 0;
}
.cd-tabs-navigation a[data-content='trash']::before {
background-position: -100px 0;
}
.cd-tabs-navigation a[data-content='inbox'].selected::before {
background-position: 0 -20px;
}
.cd-tabs-navigation a[data-content='new'].selected::before {
background-position: -20px -20px;
}
.cd-tabs-navigation a[data-content='gallery'].selected::before {
background-position: -40px -20px;
}
.cd-tabs-navigation a[data-content='store'].selected::before {
background-position: -60px -20px;
}
.cd-tabs-navigation a[data-content='settings'].selected::before {
background-position: -80px -20px;
}
.cd-tabs-navigation a[data-content='trash'].selected::before {
background-position: -100px -20px;
}
.cd-tabs-content {
// background: $light-gray;
margin-top: 0;
padding-top: 20px;
li {
display: none;
padding: 1em 0 0;
text-align: center;
p {
font-size: 0.875rem;
margin-bottom: 2em;
text-align: left;
}
h2 {
font-size: 2em;
margin-top: 0.8em;
@include bp(568up) {
text-align: left;
margin-top: 0.5em;
}
}
h2, p, h3 {
@include bp(568up) {margin-left: 55%;}
}
.photos {
@include bp(568up) {
float: left;
width: 50%;
margin-right: 5%;
}
img {margin-bottom: 0;}
}
}
li.selected {
display: block;
-webkit-animation: cd-fade-in 0.5s;
-moz-animation: cd-fade-in 0.5s;
animation: cd-fade-in 0.5s;
}
}
@-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;
}
}
// end RESPONSIVE TABS