Адаптивные табы (вкладки) для uCoz
827материалов
228тем на форуме
3004комментария
6157пользователей

Адаптивные табы (вкладки) для uCoz


Описание:

Не так давно, мы рассмотрели простейший способ реализации вкладок (табов) с содержанием, с подключением javascript, используя стандарты CSS3. Сегодня я хочу познакомить вас, с ещё одним, не менее интересным решением по формированию компактного блока вкладок (табов), построенных на чистом CSS3 и использованием элементов адаптивной вёрстки. Как и в первом варианте, ничего лишнего и громоздкого, самый минимум кода css, и в вашем распоряжении появится адаптивный блок с переключаемыми вкладками, который отлично впишется в любой раздел страницы, будь то отдельное сообщение, боковая колонка, или же модальное окно.

Установка:

Для начала скачиваете архив с нашего сайта и папку tabs загрузаете в свой файловый менеджер

Потом подключает CSS стили табов между <head></head>:
Код
<link rel="stylesheet" href="/tabs/style.css">

или в центральный CSS вставляете код:
Код
@import url("/tabs/style.css");

Где хотите видеть табы (вкладки) вставляете код:
Код
<div class="cd-tabs">
<nav>
<ul class="cd-tabs-navigation">
<li><a data-content="inbox" class="selected" href="#0">1 вкладка</a></li>
<li><a data-content="new" href="#0">2 вкладка</a></li>
<li><a data-content="gallery" href="#0">3 вкладка</a></li>
<li><a data-content="store" href="#0">4 вкладка</a></li>
<li><a data-content="settings" href="#0">5 вкладка</a></li>
<li><a data-content="trash" href="#0">6 вкладка</a></li>
</ul>
</nav>
<ul class="cd-tabs-content">
<li data-content="inbox" class="selected">
<p>содержимое</p>
</li>
<li data-content="new">
<p>содержимое</p>
</li>
<li data-content="gallery">
<p>содержимое</p>
</li>
<li data-content="store">
<p>содержимое</p>
</li>
<li data-content="settings">
<p>содержимое</p>
</li>
<li data-content="trash">
<p>содержимое</p>
</li>
</ul>
</div>

Перед закрывающим тегом </body> вставляете код:
Код
<script src="/tabs/main.js"></script>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 22.09.2016 в 14:30
Материал просмотрен: 1036 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 4 комментария

Пожаловаться
Сказать спасибо
Источник

4 комментария


avatar
Web Master @Master5512 21.09.2016 14:411
Красиво сделано, можно найти применение.
Ромчик
Рад что Вам понравилось!)
trem200
Александр @trem200 21.09.2016 20:553
0
То, что доктор прописал. Спасибо за такие хорошие вкладки.
Ромчик
Не за что. Рад что Вам понравились!)
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта