Привет друзья! В данном посте хочу познакомить вас с довольно интересным решением размещения контента на своем сайте. Мы будем использовать окно с вкладками, которые будут переключаться и отображать свое содержимое каждой вкладки с плавным появлением.
Все это будет реализовано на чистом CSS3, ничего лишнего и громоздкого. Данный блок можно разместить в любой раздел страницы как в виде отдельного сообщения, так и в боковой колонке или в модальном окне.
Для реализации данной идеи нам нужны переменные, работать с которыми можно из языков программирования, к примеру 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>
Вот что мы получим:
Немного поясню для тех, кто еще не силен в 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;}
Наши флажки преобразовались в кнопочки:
Далее нам нужно добавить код содержимого каждой вкладки и привязать их к своему переключателю. Для этого перед закрывающимся тегом </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;
}
В итоге мы получим вот такое окно, в котором я привел полный код:
<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>
<style>
.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;}
</style>
<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>
</body>
</html>
Вот и все. Данный код можно вставить в любое место своей страницы, изменив названия вкладок под себя. Во вкладках можно размещать любой контент в виде текста, картинок, таблиц, форм и т.д. Все зависит от того, что вам нужно. Не забудьте прописать дополнительные стили для своего содержимого.
На этом пока все. Переходы по вкладкам можно реализовать по клику, как в данном примере или при наведении курсора. Так же появление содержимого вкладок можно сделать в разных вариантах с применением скриптов или на чистом CSS. Будут вопросы или предложения- пишите в комментариях.
С уважением, Андрей Юрченко
Оставить комментарий:
Комментарии Вконтакте:
Content Tab Three