4162
- 0
Всем привет,вот попалась на глаза интересная реализация табов(вкладок).В этом варианте используется CSS3 Анимация контента.
Итак приступим.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
, распаковываем и заливаем в папку с вашим шаблоном стиль который вам нужен, они под номерами.
2.Вставляем сами табы на вашу страницу туда где хотите их разместить
Код:
<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">Вкладка1</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">Вкладка2</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3">Вкладка3</label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4">Вкладка4</label>
<div class="clear-shadow"></div>
<div class="content">
<div class="content-1">
<h2>Вкладка1</h2>
<p>здесь ваш контент</p>
</div>
<div class="content-2">
<h2>Вкладка2</h2>
<p>здесь ваш контент </p>
</div>
<div class="content-3">
<h2>Вкладка3</h2>
<p>здесь ваш контент</p>
</div>
<div class="content-4">
<h2>Вкладка4</h2>
<p>здесь ваш контент.</p>
</div>
</div>
</section>
Код:
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/style2.css" />Можешь почитать и вот эту статейку "Таблица цветов"
