Вкладки (таби) з нескінченною вкладеністю

59

Вкладки (таби) досить затребуваний інструмент у розробці сайтів. І це зрозуміло, компактність, можливість подання великого обсягу інформації без переходів і прокручування сторінок, все це робить вкладки такими популярними.
Раніше ми не раз розглядали тему створення вкладок, як з допомогою невеликих плагінів jQuery, так і без використання javascript, виключно на чистому CSS.
Так як тема цікавить читачів, відповідно виникає маса питань. Досить часто запитують: «Як зробити вкладки з можливістю вкладеності?» Що звичайно ж пристойно розширює функціонал табів.
Сьогодні хочу показати вам, як за допомогою jQuery і чарівних властивостей CSS3, можна дуже легко реалізувати вкладки (таби) з нескінченною вкладеністю. А щоб вкладки не виглядали стандартно, зробимо їх більш-менш схожими на вкладки браузера Chrome.

Подивитися приклад

Перш за все, що нам знадобиться, щоб вкладки заробили і виглядали так, як задумано:

Робота вкладок заснована на jQuery, так що актуальна версія цієї бібліотеки повинна бути у вас підключена, в розділі …, або перед закриваючим тегом .
Набір правил CSS, для формування зовнішнього вигляду вкладок
Невеликий плагін, який і буде виконувати всю роботу, у зв’язці з бібліотекою jQuery, запустить движуху вкладок (табів).

Якщо бібліотека jQuery у вас ще не використовується, підключаєте, для цього ви можете використовувати сервіс Google Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">

Останню версію jQuery можна дізнатися на офіційному сайті jQuery

HTML

Їдемо далі. Створимо html-каркас наших вкладок, для цього використовуємо стандартний div контейнер, а для навігації вкладками ненумерованний список ul. Ось так в html буде виглядати одиночний блок вкладок без вкладень:

<div class="tabs">
<ul class="tabs-nav">
<li class="active">Вкладка 1</li>
<li>Вкладка 2</li>
<li>Вкладка 3</li>
</ul>
<div class="tabs-box">
<div class="active">
<p>
Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу...
</p>
</div>
<div>
<p>
Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу...
</p>
</div>
<div>
<p>
Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу...
</p>
</div>
</div>
</div>
  • Вкладка 1
  • Вкладка 2
  • Вкладка 3

Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу…

Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу…

Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу…

Зверніть увагу, першого пункту навігації і відповідно першого блоку з контентом, прописаний кас “active”. В CSS для цього класу визначено властивість display: block;, що робить першу вкладку відкритої при завантаженні сторінки. При необхідності, ви можете призначити активним при завантаженні будь-яку іншу вкладку, або ж взагалі, зробити всі вкладки закритими, виключивши class=”active”.

Тепер давайте, в одну з вкладок вмонтуємо ще один блок вкладок, це і буде та сама вкладеність. Для цього достатньо взяти наведений вище код і вставити в один із div змісту, в прикладі я використовував третю вкладку.
Щоб показати можливість численних вкладень вкладок, у другій, вбудований блок вставимо ще один бокс вкладок, в цей раз виберемо другу вкладку. В результаті у нас вийде ціла серія компактних панелей з великим обсягом змісту, вкладених одна в іншу:

<div class="tabs">
<ul class="tabs-nav">
<li class="active">Вкладка 1</li>
<li>Вкладка 2</li>
<li>Вкладка 3</li>
</ul>
<div class="tabs-box">
<div class="active">
<p>
Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу...
</p>
</div>
<div>
<p>
Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу...
</p>
</div>
<div>
<div class="tabs">
<ul class="tabs-nav">
<li class="active">Вкладка 1</li>
<li>Вкладка 2</li>
<li>Вкладка 3</li>
</ul>
<div class="tabs-box">
<div class="active">
<p>
Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу...
</p>
</div>
<div>
<div class="tabs">
<ul class="tabs-nav">
<li class="active">Вкладка 1</li>
<li>Вкладка 2</li>
<li>Вкладка 3</li>
</ul>
<div class="tabs-box">
<div class="active">
<p>
Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу...
</p>
</div>
<div>
<p>
Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу...
</p>
</div>
<div>
<p>
Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу...
</p>
</div>
</div>
</div>
</div>
<div>
<p>
Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу...
</p>
</div>
</div>
</div>
</div>
</div>
</div>
  • Вкладка 1
  • Вкладка 2
  • Вкладка 3

Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу…

Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу…

  • Вкладка 1
  • Вкладка 2
  • Вкладка 3

Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу…

  • Вкладка 1
  • Вкладка 2
  • Вкладка 3

Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу…

Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу…

Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу…

Тут розміщуєте будь-який контент, текст, картинки або відео, а може і все відразу…

Як бачите, з html-розміткою все дуже просто. По ідеї, додавати вкладки можна до безкінечності, але це вже повне збочення. Пара-трійка вкладень цілком виправдано і досить.

CSS3

Стандартний вигляд вкладок вже приївся, фічі з матеріального дизайну теж не особливо радують, скрізь одне й теж. Так що, пункти навігації вкладками, эаделал в браузерном стилі, з допомогою псевдоелемент :after :before.

.tabs {
width:100%;
max-width: 720px;
min-width: 320px;
margin: 0 auto;
padding: 0;
}
.tabs-nav {
overflow: hidden;
padding-left:14px;
padding-right: 14px;
}
.tabs-nav li {
color: #555;
 padding: 5px 14px 3px;
position: relative;
text-decoration: none;
background-color: #e4e4e4;
 border-top:1px solid #ccc;
 border-radius:6px;
float: left;
display: block;
cursor:pointer;
margin-right:8px;
font-family: 'Roboto',Helvetica,sans-serif;
font-size: 14px;
text-transform:none;
}
.tabs-nav li:before, .tabs-nav li:after {
display:block;
content:" ";
position:absolute;
top:0;
height:100%;
width:16px;
background-color: #e4e4e4;
}
.tabs-nav li:before {
right:-4px;
transform: skew(25deg, 0deg) ;
-webkit-transform: skew(25deg, 0deg) ;
-moz-transform: skew(25deg, 0deg) ;
-o-transform: skew(25deg, 0deg) ;
-ms-transform: skew(25deg, 0deg) ;
border-radius:0 4px 0 0;
border-right:1px solid #ccc;
 box-shadow:rgba(0,0,0,.1)3px 2px 5px, inset rgba(255,255,255,.09)-1px 0;
z-index: 2
}
.tabs-nav li:after {
left:-4px;
transform: skew(-25deg, 0deg) ;
-webkit-transform: skew(-25deg, 0deg) ;
-moz-transform: skew(-25deg, 0deg) ;
-o-transform: skew(-25deg, 0deg) ;
-ms-transform: skew(-25deg, 0deg) ;
border-left:1px solid #ccc;
 border-radius:4px 0 0 0;
}
.tabs-nav li:hover, .tabs-nav li:hover:before, .tabs-nav li:hover:after {
background-color:#e9e9e9;
}
.tabs li.active,
.tabs li.active:before,
.tabs li.active:after,
.tabs li.active:hover,
.tabs li.active:hover:before,
.tabs li.active:hover:after {
background-color:#f4f4f4; color:#555;
}
.tabs li.active {
z-index:3;
}
.tabs-box > div {
display: none;
padding: 10px 15px;
background: rgba(255,255,255,0.9);
border:1px solid #ccc;
 box-sizing: border-box;
-webkit-animation: fade 0.5s linear;
-ms-animation: fade 0.5s linear;
animation: fade 0.5s linear;
}
.tabs-box > .active {
display: block;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}

.tabs {
width:100%;
max-width: 720px;
min-width: 320px;
margin: 0 auto;
padding: 0;
}
.tabs-nav {
overflow: hidden;
padding-left:14px;
padding-right: 14px;
}
.tabs-nav li {
color: #555;
padding: 5px 14px 3px;
position: relative;
text-decoration: none;
background-color: #e4e4e4;
border-top:1px solid #ccc;
border-radius:6px;
float: left;
display: block;
cursor:pointer;
margin-right:8px;
font-family: ‘Roboto’,Helvetica,sans-serif;
font-size: 14px;
text-transform:none;
}.tabs-nav li:before, .tabs-nav li:after {
display:block;
content:” “;
position:absolute;
top:0;
height:100%;
width:16px;
background-color: #e4e4e4;
}
.tabs-nav li:before {
right:-4px;
transform: skew(25deg, 0deg) ;
-webkit-transform: skew(25deg, 0deg) ;
-moz-transform: skew(25deg, 0deg) ;
-o-transform: skew(25deg, 0deg) ;
-ms-transform: skew(25deg, 0deg) ;
border-radius:0 4px 0 0;
border-right:1px solid #ccc;
box-shadow:rgba(0,0,0,.1)3px 2px 5px, inset rgba(255,255,255,.09)-1px 0;
z-index: 2
}
.tabs-nav li:after {
left:-4px;
transform: skew(-25deg, 0deg) ;
-webkit-transform: skew(-25deg, 0deg) ;
-moz-transform: skew(-25deg, 0deg) ;
-o-transform: skew(-25deg, 0deg) ;
-ms-transform: skew(-25deg, 0deg) ;
border-left:1px solid #ccc;
border-radius:4px 0 0 0;
}.tabs-nav li:hover, .tabs-nav li:hover:before, .tabs-nav li:hover:after {
background-color:#e9e9e9;
}
.tabs li.active,
.tabs li.active:before,
.tabs li.active:after,
.tabs li.active:hover,
.tabs li.active:hover:before,
.tabs li.active:hover:after {
background-color:#f4f4f4; color:#555;
}
.tabs li.active {
z-index:3;
}
.tabs-box > div {
display: none;
padding: 10px 15px;
background: rgba(255,255,255,0.9);
border:1px solid #ccc;
box-sizing: border-box;
-webkit-animation: fade 0.5 s linear;
-ms-animation: fade 0.5 s linear;
animation: fade 0.5 s linear;
}
.tabs-box > .active {
display: block;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}

Якщо виникнуть проблеми з властивістю накладання z-index:, а вони можуть виникнути, малоймовірно, але чим чорт не жартує, так як значення виставив чисто для прикладу, просто поекспериментуйте з параметрами і все у вас вийде. В іншому, як бачите, все простіше нікуди.

jQuery

Актуальну версію бібліотеки підключили безпосередньо з Google CDN або з сервера, де розташований ваш сайт, залишається тільки завести наші вкладки, для чого перед закриваючим тегом , прописуємо ініціюючий плагін my-tabs.js попередньо завантажений в папку, де у вас «складуються» все js:

<script src="js/my-tabs.js">

«Фарш» плагіна — це всього лише з декількох рядків коду, ніяких налаштувань і яких би то не було ефектів. Простеньку анімацію при відкритті вкладок, прописав в CSS.

$('.tabs-nav li').click(function(e) {
var a = $(this),
parent = a.parents('.tabs'),
nav = parent.children('.tabs-nav').children('li'),
box = parent.children('.tabs-box').children('div');
if (!a.hasClass('active')) {
a.addClass('active')
.siblings().removeClass('active');
box.eq(a.index()).addClass('active')
.siblings().removeClass('active');
}
e.preventDefault();
});

$(‘.tabs-nav li’).click(function(e) {
var a = $(this),
parent = a.parents(‘.tabs’),
nav = parent.children(‘.tabs-nav’).children(‘li’),
box = parent.children(‘.tabs-box’).children(‘div’);
if (!a.hasClass(‘active’)) {
a.addClass(‘active’)
.siblings().removeClass(‘active’);
box.eq(a.index()).addClass(‘active’)
.siblings().removeClass(‘active’);
}
e.preventDefault();
});

На цьому мабуть все. Симпатичні вкладки (суто на мій погляд) з нескінченною вкладеністю готові до роботи. Залишається тільки подивитися готовий результат і якщо воно вам треба, завантажити вихідні коди, які я дбайливо упакував і виклав на свій Яндек.Диск:

Подивитися примерСкачать исходники

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: