Эффектные вкладки (табы) для сайта

Привет друзья! В данном посте хочу познакомить вас с довольно интересным решением размещения контента на своем сайте. Мы будем использовать окно с вкладками, которые будут переключаться и отображать свое содержимое каждой вкладки с плавным появлением.

Все это будет реализовано на чистом CSS3, ничего лишнего и громоздкого. Данный блок можно разместить в любой раздел страницы как в виде отдельного сообщения, так и в боковой колонке или в модальном окне.

tab html, вкладки html, табы html, табы вкладки

Для реализации данной идеи нам нужны переменные, работать с которыми можно из языков программирования, к примеру JavaScript, но наша задача исключить их и не использовать коды JS.

CSS является описательным языком программирования и не имеет переменных. Что делать, спросите вы? Все просто, мы будем использовать флажки и переключатели, которые имеются в HTML.

Воспользуемся приведенным ниже кодом, чтобы создать полоску переключателей:

<section class=»tabs»>

            <input id=»tab_1″ type=»radio» name=»tab» checked=»checked» />

            <label for=»tab_1″ id=»tab_l1″>Tab One</label>

            <input id=»tab_2″ type=»radio» name=»tab» />

            <label for=»tab_2″ id=»tab_l2″>Tab Two</label>

            <input id=»tab_3″ type=»radio» name=»tab» />

            <label for=»tab_3″ id=»tab_l3″>Tab Three</label>

</section>

Вот что мы получим:

Tab OneTab Two Tab Three

Немного поясню для тех, кто еще не силен в HTML:

Переключатели одного набора должны иметь одинаковое свойство name, по которому браузер понимает к какому набору относится переключатель.
Метка (тэг label) связывается с переключателем по свойству id. Каждый переключатель должен иметь свой уникальный id, а у каждой метки в свойстве for должен быть указан id переключателя, к которому она относится.
Свойством checked отмечен переключатель, включенный по умолчанию.

Теперь нам нужно немного облагородить наши переключатели и превратить их в кнопки с надписями. Для этого мы воспользуемся кодом стилей:

.tabs {

    position: relative;

    margin: 0 auto;

   width: 600px;

border: 1px solid #888;

}

.tabs label {

            display: block;

            float: left;

            width: 32%;

            background: #ccc;

            border: 1px solid #888;

               -moz-border-radius: 2px;

            -webkit-border-radius: 2px;

                                   border-radius: 2px;

            text-align: center;

            font-size: 1em;

            font-weight: bold;

            line-height: 2.5em;

            color: #555;

            text-transform: uppercase;

            text-shadow: #fff 0 1px 0;

            cursor: pointer;

}

.tabs input {position: absolute;left: -9999px;}

Наши флажки преобразовались в кнопочки:

Tab OneTab Two Tab Three

Далее нам нужно добавить код содержимого каждой вкладки и привязать их к своему переключателю. Для этого перед закрывающимся тегом </section> нужно вставить следующий код:

<div class=»tabs_cont»>
<div id=»tab_c1″>
<p>Content Tab One</p>
</div>
<div id=»tab_c2″>
<p>Content Tab Two</p>
</div>
<div id=»tab_c3″>
<p>Content Tab Three</p>
</div>
</div>

На данном этапе вы не увидите никаких изменений- на странице будут отображаться только кнопки без содержимого. Для того, чтобы происходило переключение и вывод содержимого на экран нам необходимо добавить код в наши стили, который и будет реализовывать данный функционал. Вот этот код:

#tab_1:checked ~ #tab_l1,

#tab_2:checked ~ #tab_l2,

#tab_3:checked ~ #tab_l3 {background: #fff;border: 1px solid #ccc;top: 0;

}

#tab_1:checked ~ .tabs_cont #tab_c1,

#tab_2:checked ~ .tabs_cont #tab_c2,

#tab_3:checked ~ .tabs_cont #tab_c3 {position: static;left: 0;opacity: 1;}

.tabs_cont {background: #fff;padding: 1em;position: relative;}

.tabs_cont > div {

            position: absolute;

            left: -9999px;

            top: 0;

            opacity: 0;

            -moz-transition: opacity .5s ease-in-out;

            -webkit-transition: opacity .5s ease-in-out;

            transition: opacity .5s ease-in-out;

}

В итоге мы получим вот такое окно, в котором я привел полный код:

HTMLCSS index

<section class=»tabs»>
<input id=»tab_1″ type=»radio» name=»tab» checked=»checked» />
<input id=»tab_2″ type=»radio» name=»tab» />
<input id=»tab_3″ type=»radio» name=»tab» />
<label for=»tab_1″ id=»tab_l1″>Tab One</label>
<label for=»tab_2″ id=»tab_l2″>Tab Two</label>
<label for=»tab_3″ id=»tab_l3″>Tab Three</label>
<div style=»clear:both»></div>

<!—Content—>
<div class=»tabs_cont»>
<div id=»tab_c1″>
<p>Content Tab One</p>
</div>
<div id=»tab_c2″>
<p>Content Tab Two</p>
</div>
<div id=»tab_c3″>
<p>Content Tab Three</p>
</div>
</div>
</section>

.tabs {
position: relative;
margin: 0 auto;
width: 600px;
border: 1px solid #888;
}
.tabs label {
display: block;
float: left;
width: 33%;
background: #ccc;
border: 1px solid #888;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
text-align: center;
font-size: 1em;
font-weight: bold;
line-height: 2.5em;
color: #555;
text-transform: uppercase;
text-shadow: #fff 0 1px 0;
cursor: pointer;
}
.tabs input {position: absolute;left: -9999px;}
#tab_1:checked ~ #tab_l1,
#tab_2:checked ~ #tab_l2,
#tab_3:checked ~ #tab_l3 {background: #fff;border: 1px solid #ccc;top: 0;
}
#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2,
#tab_3:checked ~ .tabs_cont #tab_c3 {position: static;left: 0;opacity: 1;}
.tabs_cont {background: #fff;padding: 1em;position: relative;}
.tabs_cont > div {position: absolute;left: -9999px;top: 0;opacity: 0;-moz-transition: opacity .5s ease-in-out;-webkit-transition: opacity .5s ease-in-out;transition: opacity .5s ease-in-out;}

<!DOCTYPE html>
<html lang=»ru»>
<head>
<title>Tabs | CSS</title>
<meta charset=’utf-8′/>
<meta content=’width=device-width, initial-scale=1′ name=’viewport’/>
</head>

</body>
</html>

Вот и все. Данный код можно вставить в любое место своей страницы, изменив названия вкладок под себя. Во вкладках можно размещать любой контент в виде текста, картинок, таблиц, форм и т.д. Все зависит от того, что вам нужно. Не забудьте прописать дополнительные стили для своего содержимого.

На этом пока все. Переходы по вкладкам можно реализовать по клику, как в данном примере или при наведении курсора. Так же появление содержимого вкладок можно сделать в разных вариантах с применением скриптов или на чистом CSS. Будут вопросы или предложения- пишите в комментариях.

С уважением, Андрей Юрченко