Как сделать вкладки на чистом CSS и HTML

Приведу интересное решение по формированию компактного блока вкладок (табов), построенных на чистом CSS3 и использованием элементов адаптивной вёрстки. Здесь ничего лишнего и громоздкого, самый минимум кода css, и в вашем распоряжении появится адаптивный блок с переключаемыми вкладками, который отлично впишется в любой раздел страницы, будь то отдельное сообщение, боковая колонка, или же модальное окно.

Код CSS

<style>

.notebook2 {
width: 640px;
height: 450px;
position: relative;
}

.notebook2 > input {

display: none;

}

.notebook2 > div {

position: absolute;

box-sizing: border-box;

top: 30px;

left: 0px;

bottom: 0px;

right: 0px;

border-radius: 10px;

padding: 0px 1em;

z-index: 0;

background-color: #666;

transition: all 0.5s ease 0s, z-index 0s 0.5s;

}

.notebook2 > div > *:first-child {

display: block;

position: absolute;

box-sizing: border-box;

top: -30px;

width: 150px;

height: 30px;

font-family: Arial;

font-size: 13px;

border-radius: 10px 10px 0px 0px;

background-color: inherit;

color: #fff;

line-height: 28px;

cursor: pointer;

text-align: center;

transition: all 0.5s ease 0s;

}

.notebook2 > div > *:not(:first-child) {

opacity: 0;

transition: all 0.5s ease 0s;

}

.notebook2 > div:nth-of-type(1) > *:first-child { left: 20px; }

.notebook2 > div:nth-of-type(2) > *:first-child { left: 170px; }

.notebook2 > div:nth-of-type(3) > *:first-child { left: 320px; }

.notebook2 > div:nth-of-type(4) > *:first-child { left: 470px; }

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1),

.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2),

.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3),

.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) {

z-index: 10;

background-color: #ccc;

transition: all 0.5s ease 0.5s, z-index 0s 0.5s;

}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,

.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child,

.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:first-child,

.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:first-child {

color: #333;

transition: all 0.5s ease 0.5s;

}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),

.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child),

.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:not(:first-child),

.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:not(:first-child) {

opacity: 1;

transition: all 0.5s ease 0.5s;

}

</style>

Код HTML

<div>

<label for="notebook2a_1">Первая вкладка</label>

<p>Это первая вкладка с котом.</p>

</div>

<div>

<label for="notebook2a_2">Вторая вкладка</label>

<p>Это вторая вкладка с лисой</p>

</div>

<div>

<label for="notebook2a_3">Третья вкладка</label>

<p>Это третья вкладка с волком.</p>

</div>

<div>

<label for="notebook2a_4">Четвертая вкладка</label>

<p>Это четвёртая вкладка с рысью</p>

</div>