Сниппет для вкладок навігації на css3

28

Сниппет для вкладок навигации на css3

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

CSS Стилі

.tabs {
width: 100%;
height: 220px;
}
.tabs ul,
.tabs li {
margin: 0;
padding: 0;
list-style: none;
}
.tabs,
.tabs input[type="radio"]:checked + label {
position: relative;
}
.tabs li,
.tabs input[type="radio"] + label {
display: inline-block;
}
.tabs li > div,
.tabs input[type="radio"] {
position: absolute;
}
.tabs li > div,
.tabs input[type="radio"] + label {
border: 1px solid #ccc;
}
.tabs {
font: normal 11px Arial, Sans-serif;
color: #404040;
}
.tabs li {
vertical-align: top;
}
.tabs li:first-child {
margin-left: 8px;
}
.tabs li > div {
top: 33px;
bottom: 0;
left: 0;
width: 100%;
padding: 8px;
overflow: auto;
background: #fff;
 -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tabs input[type="radio"] + label {
margin: 0 2px 0 0;
padding: 0 18px;
line-height: 32px;
background: #f1f1f1;
 text-align: center;
border-radius: 5px 5px 0 0;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.tabs input[type="radio"]:checked + label {
z-index: 1;
background: #fff;
 border-bottom-color: #fff;
 cursor: default;
}
.tabs input[type="radio"] {
opacity: 0;
}
.tabs input[type="radio"] ~ div {
display: none;
}
.tabs input[type="radio"]:checked:not(:disabled) ~ div {
display: block;
}
.tabs input[type="radio"]:disabled + label {
opacity: .5;
cursor: no-drop;
}

.tabs {
width: 100%;
height: 220px;
}
.tabs ul,
.tabs li {
margin: 0;
padding: 0;
list-style: none;
}
.tabs,
.tabs input[type=”radio”]:checked + label {
position: relative;
}
.tabs li,
.tabs input[type=”radio”] + label {
display: inline-block;
}
.tabs li > div,
.tabs input[type=”radio”] {
position: absolute;
}
.tabs li > div,
.tabs input[type=”radio”] + label {
border: 1px solid #ccc;
}
.tabs {
font: normal 11px Arial, Sans-serif;
color: #404040;
}
.tabs li {
vertical-align: top;
}
.tabs li:first-child {
margin-left: 8px;
}
.tabs li > div {
top: 33px;
bottom: 0;
left: 0;
width: 100%;
padding: 8px;
overflow: auto;
background: #fff;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tabs input[type=”radio”] + label {
margin: 2px 0 0 0;
padding: 0 18px;
line-height: 32px;
background: #f1f1f1;
text-align: center;
border-radius: 5px 5px 0 0;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.tabs input[type=”radio”]:checked + label {
z-index: 1;
background: #fff;
border-bottom-color: #fff;
cursor: default;
}
.tabs input[type=”radio”] {
opacity: 0;
}
.tabs input[type=”radio”] ~ div {
display: none;
}
.tabs input[type=”radio”]:checked:not(:disabled) ~ div {
display: block;
}
.tabs input[type=”radio”]:disabled + label {
opacity: .5;
cursor: no-drop;
}

HTML Каркас

<div class="tabs">
<ul>
<li>
<input type="radio" name="tabs-0" checked="checked" id="tabs-0-0" />
<label for="tabs-0-0">Вкладка 1</label>
<div>
<h3>Переборюючи зло</h3>
<p>Коли-то в одному маленькому селі жив-був гобіт. Звали його Федулов. З рідних і близьких y нього зовсім
нікого не було, бо він солодкого їв, скільки лізло, а додому міг водити дівчат. І в один прекрасний
день з ним зустрічається побитий сусід. І каже: — Немає чого випити? А то так їсти хочеться, що
переночувати ніде. Герой робить вигляд, що зайнятий.Тоді дивний співрозмовник каже: — Чорні вершники
шукають тебе! І герой змушений покинути рідні місця. Він біжить до знайомих дивного візитера. А
дивний візитер вичищає залишився без господаря будинок.
</p>
</div>
</li>
<li>
<input type="radio" name="tabs-0" id="tabs-0-1" />
<label for="tabs-0-1">Вкладка 2</label>
<div>
<h3>Зловісний повелитель</h3>
<p>у стародавні часи В одному сміттєвому контейнері жив-був ельф-напівкровка. Звали його Лавруша, але він
просив, щоб до нього зверталися не інакше як Лаврентій Павлович. З рідних і близьких y нього була одна
нянечка, Аріна Родіонівна.І в один чудовий день з ним зустрічається побитий сусід. І говорить: -
Як, ти ще живий?! Герой в упор його не помічає. Тоді дивний співрозмовник каже: - Ворог біля воріт! І
герой змушений покинути рідні місця. Він біжить, і дерева своїми гілками хльостають його в обличчя. А
дивний візитер падає замертво.
</p>
</div>
</li>
<li>
<input type="radio" name="tabs-0" id="tabs-0-2" />
<label for="tabs-0-2">Вкладка 3</label>
<div>
<h3>Самотня квітка</h3>
<p>Коли-то в одному маленькому селі жив-був хуліганський, задиристий, але дуже добрий в душі хлопчина.
Звали його як батька, але схожий він був на сусіда. З рідних і близьких y нього була сестриця Альонушка,
подлюка рідкісна. І ось одного разу до нього підходить дивно виглядає людина. І каже: - Йди за
мною! Герой міркує, куди б сховати нагромаджене золотко. Тоді дивний співрозмовник
каже: - Я заболтаю тебе до смерті!
</p>
</div>
</li>
<li>
<input type="radio" name="tabs-0" id="tabs-0-3" disabled="disabled" />
<label for="tabs-0-3">Вкладка 4</label>
<div>
<h3>Руйнуючи поодинці</h3>
<p>Головний лиходій розгублений. Він-то думав, що це він Хороший, а виявилося зовсім навпаки. Не в силах
перенести це потрясіння лиходій робить собі харакірі дворучним мечем.
Всі роблять вигляд, що щасливі. А головний герой розуміє, що виконав своє призначення, і тепер він
може повернутися додому, щоб у ситості й достатку животіти до самої старості.</p>
</div>
</li>
</ul>
</div>
  • Вкладка 1

    Переборюючи зло

    Колись в одному маленькому селі жив собі гобіт. Звали його Федулов. З рідних і близьких y нього зовсім
    нікого не було, бо він солодкого їв, скільки лізло, а додому міг водити дівчат. І в один прекрасний
    день з ним зустрічається побитий сусід. І каже: — Немає чого випити? А то так їсти хочеться, що
    переночувати ніде. Герой робить вигляд, що зайнятий.Тоді дивний співрозмовник каже: — Чорні вершники
    шукають тебе! І герой змушений покинути рідні місця. Він біжить до знайомих дивного візитера. А
    дивний візитер вичищає залишився без господаря будинок.

  • Вкладка 2

    Зловісний повелитель

    У стародавні часи В одному сміттєвому контейнері жив-був ельф-напівкровка. Звали його Лавруша, але він
    просив, щоб до нього зверталися не інакше як Лаврентій Павлович. З рідних і близьких y нього була одна
    нянечка, Аріна Родіонівна.І в один чудовий день з ним зустрічається побитий сусід. І говорить: –
    Як, ти ще живий?! Герой в упор його не помічає. Тоді дивний співрозмовник каже: – Ворог біля воріт! І
    герой змушений покинути рідні місця. Він біжить, і дерева своїми гілками хльостають його в обличчя. А
    дивний візитер падає замертво.

  • Вкладка 3

    Самотня квітка

    Колись в одному маленькому селі жив-був хуліганський, задиристий, але дуже добрий в душі хлопчина.
    Звали його як батька, але схожий він був на сусіда. З рідних і близьких y нього була сестриця Альонушка,
    подлюка рідкісна. І ось одного разу до нього підходить дивно виглядає людина. І каже: – Йди за
    мною! Герой міркує, куди б сховати нагромаджене золотко. Тоді дивний співрозмовник
    каже: – Я заболтаю тебе до смерті!

  • Вкладка 4

    Руйнуючи поодинці

    Головний лиходій розгублений. Він-то думав, що це він Хороший, а виявилося зовсім навпаки. Не в силах
    перенести це потрясіння лиходій робить собі харакірі дворучним мечем.
    Всі роблять вигляд, що щасливі. А головний герой розуміє, що виконав своє призначення, і тепер він
    може повернутися додому, щоб у ситості й достатку животіти до самої старості.

Сподіваюся, що це цікаве рішення щодо створення керованих вкладок(табів) зацікавить багатьох. Якщо вам відомі інші, практичні способи реалізації елементів такого роду, пишіть в коментарях, і в наступних оглядах я обов’язково розповім про них.

Джерело: cssreflex

Удачі! Всіх З Новим роком!