• 1660
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Всем привет,вот попалась на глаза интересная реализация табов(вкладок).В этом варианте используется 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>
3.Подключить стиль в хеад
Код:
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/style2.css" />
Все,пользуемся.

Можешь почитать и вот эту статейку "Стильные CSS3 hover эффекты"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

----