Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 9 - октября CSS
2689 - 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" />
Все,пользуемся.

Можешь почитать и вот эту статейку "С Днём Победы !"

Опрос

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3324 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 571
  • Онлайн всего: [12]
  • Гости: [11]
  • Поисковики: [1] Google
  • Были сегодня : [4] Яндекс, Google, selischev, irbees2008
  • SQL запросов: 33
  • Генерация страницы: 0.137сек
  • Потребление памяти: 4.943 Mb 
  •   яндекс.ћетрика