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

Можешь почитать и вот эту статейку "Копируем и вставляем столбец в Mysql"

Опрос

Ваше мнение

TWIG -что это?
Результаты

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

Теги

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

Статистика

  • Caйту: 4488 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 670
  • Онлайн всего: [7]
  • Гости: [6]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Google, Яндекс, dankeanke
  • SQL запросов: 32
  • Генерация страницы: 0.397сек
  • Потребление памяти: 5.161 Mb 
  •   Яндекс.Метрика