Download taby
{default $modal = false}
<nav class="tabs-nav js--tabs --w-12 --column tabs-nav--download">
<div class="tabs-nav__nav --flex-inline ">
<ul class="tabs-nav__tabs tabs tabs-nav__tabs--downloads">
<li class="tabs__item tabs__item--downloads">
<span class="tabs__link tabs__link--active" data-href="#dogtrace" >
Popis a vlastnosti produktu
</span>
</li>
<li class="tabs__item tabs__item--downloads">
<span class="tabs__link" data-href="#fencee">
Související produkty
</span>
</li>
</ul>
</div>
</nav>
<div class="tabs-content --w-12 --column">
<div class="tabs-content__block tabs-content__block--active" id="dogtrace">
<div class="tabs-content__wrapper tabs-dogtrace">
<div class="tabs-downloads">
<div class="tabs-downloads__list-wrap">
<ul class="tabs-downloads__list">
<li class="tabs-downloads__item">
<a href="#" class="tabs-downloads__link">
Kategorie ke stažení
</a>
</li>
<li class="tabs-downloads__item">
<a href="#" class="tabs-downloads__link">
Kategorie ke stažení s delším názvem
</a>
</li>
<li class="tabs-downloads__item">
<a href="#" class="tabs-downloads__link">
Další kategorie
</a>
</li>
<li class="tabs-downloads__item">
<a href="#" class="tabs-downloads__link">
Kategorie ke stažení
</a>
</li>
</ul>
</div>
<div class="tabs-downloads__lists">
<div class="tabs-downloads__lists-wrapper">
<div class="tabs-downloads__file-list download-list">
<h2 class="download-list__title">
Kategorie ke stažení
</h2>
<div class="download-list__perex">
Korem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio
mattis. Korem ipsum dolor sit amet, consectetur adipiscing.
</div>
<ul class="download-list__list">
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
</ul>
</div>
</div>
<div class="tabs-downloads__lists-wrapper" >
<div class="tabs-downloads__file-list download-list">
<h2 class="download-list__title">
Kategorie ke stažení
</h2>
<div class="download-list__perex">
Korem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio
mattis. Korem ipsum dolor sit amet, consectetur adipiscing.
</div>
<ul class="download-list__list">
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
</ul>
</div>
</div>
<div class="tabs-downloads__lists-wrapper" >
<div class="tabs-downloads__file-list download-list">
<h2 class="download-list__title">
Kategorie ke stažení
</h2>
<div class="download-list__perex">
Korem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio
mattis. Korem ipsum dolor sit amet, consectetur adipiscing.
</div>
<ul class="download-list__list">
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
</ul>
</div>
</div>
<div class="tabs-downloads__lists-wrapper" >
<div class="tabs-downloads__file-list download-list">
<h2 class="download-list__title">
Kategorie ke stažení
</h2>
<div class="download-list__perex">
Korem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio
mattis. Korem ipsum dolor sit amet, consectetur adipiscing.
</div>
<ul class="download-list__list">
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tabs-content__block" id="fencee">
<div class="tabs-content__wrapper tabs-fencee">
<div class="tabs-downloads">
<div class="tabs-downloads__list-wrap">
<ul class="tabs-downloads__list">
<li class="tabs-downloads__item">
<a href="#" class="tabs-downloads__link">
Kategorie ke stažení
</a>
</li>
<li class="tabs-downloads__item">
<a href="#" class="tabs-downloads__link">
Kategorie ke stažení s delším názvem
</a>
</li>
<li class="tabs-downloads__item">
<a href="#" class="tabs-downloads__link">
Další kategorie
</a>
</li>
<li class="tabs-downloads__item">
<a href="#" class="tabs-downloads__link">
Kategorie ke stažení
</a>
</li>
</ul>
</div>
<div class="tabs-downloads__lists">
<div class="tabs-downloads__lists-wrapper">
<div class="tabs-downloads__file-list download-list">
<h2 class="download-list__title">
Kategorie ke stažení
</h2>
<div class="download-list__perex">
Korem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio
mattis. Korem ipsum dolor sit amet, consectetur adipiscing.
</div>
<ul class="download-list__list">
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
</ul>
</div>
</div>
<div class="tabs-downloads__lists-wrapper" >
<div class="tabs-downloads__file-list download-list">
<h2 class="download-list__title">
Kategorie ke stažení
</h2>
<div class="download-list__perex">
Korem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio
mattis. Korem ipsum dolor sit amet, consectetur adipiscing.
</div>
<ul class="download-list__list">
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
</ul>
</div>
</div>
<div class="tabs-downloads__lists-wrapper" >
<div class="tabs-downloads__file-list download-list">
<h2 class="download-list__title">
Kategorie ke stažení
</h2>
<div class="download-list__perex">
Korem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio
mattis. Korem ipsum dolor sit amet, consectetur adipiscing.
</div>
<ul class="download-list__list">
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
</ul>
</div>
</div>
<div class="tabs-downloads__lists-wrapper" >
<div class="tabs-downloads__file-list download-list">
<h2 class="download-list__title">
Kategorie ke stažení
</h2>
<div class="download-list__perex">
Korem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vulputate libero et velit interdum, ac aliquet odio
mattis. Korem ipsum dolor sit amet, consectetur adipiscing.
</div>
<ul class="download-list__list">
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
<li class="download-list__list-item">
<a href="#" class="download-list__list-link">
Soubor 1(2MB, PDF)
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.tabs{
.tabs-nav--download &{
@include media($medium){
gap: 1.5rem;
}
}
}
.tabs-nav__nav{
.tabs-nav--download &{
background: none;
border: none;
border-bottom: 0.1rem solid $color__border;
border-radius: 0;
}
}
.tabs__link{
.tabs-nav--download &{
background: $color__bg-light;
border-radius: 0.4rem;
border: 0.1rem solid $color__border;
}
}
.tabs__link--active{
.tabs-nav--download &{
background: $color__bg;
border-radius: 0.4rem;
border-bottom: 0.1rem solid transparent;
}
}
.tabs-downloads__lists-wrapper{
padding: 2rem;
border-radius: 0.8rem;
border: 0.1rem solid $color__border;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.download-list__title{
margin-bottom: 1rem;
}
.download-list__perex{
margin-bottom: 2rem;
}
.tabs-downloads__lists{
display: flex;
flex-direction: column;
row-gap: 1.5rem;
}
.download-list__list-item{
display: flex;
align-items: center;
position: relative;
padding-left: 2.4rem;
&:before{
@include pseudo();
width: 1.4rem;
height: 1.6rem;
background-color: $color__brand;
mask-image: url("/www/img/file.svg");
mask-size: 100%;
left: 0;
}
}
.download-list__list-link{
display: flex;
align-items: center;
text-decoration: underline;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
font-size: 1.6rem;
}
.tabs-downloads__list{
display: flex;
align-items: center;
flex-wrap: wrap;
border-radius: 0.4rem;
border: 0.1rem solid $color__border;
background: $color__bg-lighter;
margin-bottom: 2rem;
}
.tabs-downloads__item{
border-radius: 0.4rem;
display: flex;
align-items: center;
}
.tabs-downloads__link{
padding: 1rem 2rem;
border-radius: 0.4rem;
transition: none;
color: $color__text-dark;
border-left: 0.1rem solid transparent;
border-right: 0.1rem solid transparent;
&:hover, &:focus, &:active{
background: $color__bg;
border-left: 0.1rem solid $color__border;
border-right: 0.1rem solid $color__border;
border-radius: 0.4rem;
}
}
.tabs__item--downloads{
margin-bottom: -0.1rem;
& .tabs__link--active {
border-radius: 0;
border-bottom-color: $color__bg;
}
& .tabs__link {
border-radius: 0;
border-top-left-radius: 0.4rem;
border-top-right-radius: 0.4rem;
}
}
.tabs-nav__tabs--downloads{
overflow: visible;
}
JS, je potřeba přidat do webpack.mix.js
/**
* logic to clickable tabs on website
* @version 2.0.2
* @package custom_tabs
*/
function changeUrlAnchor(anchor){
anchor = '#' + anchor.replace('#', '');
let actUrl = window.location.href;
actUrl = actUrl.substring(0, actUrl.lastIndexOf("#"));
actUrl += anchor;
history.replaceState({}, 'Title', actUrl);
}
function changeTab(target, byHref){
let targetId = '';
if(byHref){
targetId = target.getAttribute("href");
changeUrlAnchor(targetId)
}else {
targetId = target.dataset.href;
}
if (!targetId)
return;
const tabBlock = document.querySelector(targetId);
if (tabBlock === null)
return;
const tabNav = findAncestor(target, ".tabs");
const tabContent = findAncestor(tabBlock, ".tabs-content");
const activeLinks = tabNav.querySelectorAll(".tabs__link--active");
const activeBlocks = tabContent.querySelectorAll(".tabs-content__block--active");
/* Removes active class from other tabs */
if (activeLinks) {
for (let i = 0; i < activeLinks.length; i++) {
activeLinks[i].classList.remove("tabs__link--active");
}
}
/* Removes active class from other tab blocks */
if (activeBlocks) {
for (let i = 0; i < activeBlocks.length; i++) {
activeBlocks[i].classList.remove("tabs-content__block--active");
}
}
/* Adds active class to current tab and tab block */
target.classList.add("tabs__link--active");
tabBlock.classList.add("tabs-content__block--active");
}
document.addEventListener("click", function (e) {
let target = e.target;
let tab_root = findAncestor(target, '.js--tabs');
let tab_link = findAncestor(target, ".tabs__link");
if ((target.classList.contains("tabs__link") || tab_link) && tab_root) {
if(tab_link){
target = tab_link;
}
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
let byHref = true;
if(typeof target.dataset.href !== 'undefined' && target.dataset.href !== ''){
byHref = false;
}
changeTab(target, byHref);
return false;
}
});
document.addEventListener('DOMContentLoaded', function (){
let url = window.location.href;
let anchor = url.split('#')[1] || false;
if(anchor){
anchor = '#' + anchor;
let tab = document.querySelector('[href="' + anchor + '"]');
if(tab && tab.classList.contains('tabs__link') && findAncestor(tab, '.js--tabs')){
changeTab(tab, true);
}
}
/**
* This functions expands the first item if a tabs-nav has data-init-expand attribute
*/
document.querySelectorAll('.js--tabs').forEach(function (tabsItem){
let firstItem = tabsItem.querySelector('.tabs__link');
if(typeof(tabsItem.dataset.initExpand) !== "undefined"){
firstItem.classList.add('tabs__link--active');
document.querySelector(firstItem.dataset.href).classList.add('tabs-content__block--active');
}
});
});