Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 9 - октября CSS
4162 - 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йт cущecтвуeт: 4627 дней
  • Статических страниц: 10
  • Категорий: 28
  • Новостей: 618
  • Неопубликованных новостей: 8
  • Комментариев: 257
  • Зарегестрированных пользователей: 779
  • Онлайн всего: [20]
  • Гости: [18]
  • Поисковые роботы: [2] Яндекс, Google
  • Сегодня нас посетили: [7] Google, Larrytitly, Яндекс, Яндекс, irbees2008, Google, dankeanke
  • SQL запросов: 39
  • Генерация страницы: 0.123сек
  • Потребление памяти: 2.994 Mb 
  •   Яндекс.Метрика