Tab navigace (tabs)

Latte / Html

  <nav class="tabs-nav js--tabs">
        <div class="tabs-nav__content --content">
            <div class="tabs-nav__nav --flex-inline">
                <ul class="tabs-nav__tabs tabs">
                    <li class="tabs__item">
                        <span class="tabs__link tabs__link--active" data-href="#categories_product">
                            Testovací položka
                        </span>
                    </li>
                    <li class="tabs__item">
                        <span class="tabs__link" data-href="#blogs">
                            Testovací položka 2
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Tabs-content

 <div class="tabs-content">
        <div class="tabs-content__block tabs-content__block--active" id="categories_product">
            Test
        </div>
        <div class="tabs-content__block" id="blogs">
           Test
        </div>
    </div>



CSS / SCSS

/* Tabs */

.tabs {
	display: flex;
	flex-wrap: wrap;
}

.tabs__item {
	margin: 0 12px;
	
	@include media($large){
		margin: 0 20px;
	}
}

.tabs__link {

	font-size: 1.8rem;
	padding: 15px 0;
	display: block;
	color: $color__text;
	
	.tabs__item--selected & {
		border-bottom: 2px solid $color__primary;
	}
	
	.tabs--big & {
		font-weight: 700;
	}
	
	@include media($large){
		padding: 35px 0;
	}
}

.tabs__link--active{
	font-weight: 700;
}


/* Tabs nav */

.tabs-nav{
	background: $color__gray-light;
	top: 0;
	z-index: 900;
}

.tabs-nav__label {
	font-size: 1.8rem;
	padding: 10px 0;
	display: flex;
	font-weight: 700;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	margin: 0 30px 0 0;
}

/* Tabs content */

.tabs-content__block{
	display:none;
	
}
.tabs-content__block--active{
	display: block;
}

.tabs-content__title{
	margin-top: 30px;
	margin-bottom: 20px;
}

Javascript - přepínání tab-content

Je potřeba přidat do webpack.mix.js soubor custom_tabs.js

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*