Адаптивные вкладки на JQUERY для uCoz


Адаптивные вкладки на JQUERY для uCoz

2641
8.8 из 10
Проголосовало: 13






Несколько строк кода на jQuery + один CSS файл и отличные адаптивные вкладки готовы. Внешний вид полностью настраивается стилями. При уменьшении размера окна браузера до заданного в @media{} вкладки из горизонтальных преобразуются в вертикальный аккордион.

УСТАНОВКА:

ШАГ 1.

Установите следующий HTML туда, куда вам нужно:

Код

<ul class="accordion-tabs">
  <li class="tab-head-cont">
  <a href="#" class="is-active">webo4ka #1</a>
  <section>
  <p>....</p>
  </section>
  </li>
  <li class="tab-head-cont">
  <a href="#">webo4ka #2</a>
  <section>
  <p>Здравствуйте юзер, вы попали на популярнейший ресурc webo4ka.ru посвященный системе uCoz. Здесь вы сможете найти сотни рабочих, полезных, качественных и интересных скриптов для вашего сайта.  
Наш сайт отличается от многих других сайтов такой тематики тем, что у нас много авторских скриптов, <br>
которые можно найти в категории Авторство Webo4ki. Так же на сайте расположено не мало шаблонов, и почти <br>
каждый материал залит на сервер сайта, что бы пользователи могли скачать материал быстро, без ожидания и без возмущений, что материал удален с какого-то файлообменника. Ну а если у вас возникли какие-либо проблемы, то вы можете обратиться на форум, где вам постараются помочь. </p>
  </section>
  </li>
  <li class="tab-head-cont">
  <a href="#">webo4ka #3</a>
  <section>
  <p>.........</p>  
  </section>
  </li>
  <li class="tab-head-cont">
  <a href="#">webo4ka #4</a>
  <section>
  <p>.........</p>
  </section>
  </li>
</ul>


ШАГ 2.

На этой же странице подключите jQuery библиотеку

Код

<script>
$(document).ready(function () {
$('.accordion-tabs').children('li').first().children('a').addClass('is-active')
.next().addClass('is-open').show();
$('.accordion-tabs').on('click', 'li > a', function(event) {
if (!$(this).hasClass('is-active')) {
event.preventDefault();
$('.accordion-tabs .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('.accordion-tabs').find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
} else {
event.preventDefault();
}
});
});
</script>


ШАГ 3.

Идём в Таблицу Стилей CSS и вставляем туда следующий код:

Код

/* TABS */
.accordion-tabs {
  *zoom: 1;
  width: 100%;
  border: 1px solid #dddddd;
  border-radius: 0.1875em;
  margin-bottom: 1.5em;
  margin-left:0;
  padding-left:0;
}
  .accordion-tabs:before,
  .accordion-tabs:after {
  content: " ";
  display: table;
  }
  .accordion-tabs:after {
  clear: both;
  }
  .accordion-tabs li{
  list-style:none;
  }
  .accordion-tabs li.tab-head-cont:first-child a {
  border-top-left-radius: 0.1875em;
  border-top-right-radius: 0.1875em;
  border-top: 0;
  }
  .accordion-tabs li.tab-head-cont:last-child a {
  border-bottom-left-radius: 0.1875em;
  border-bottom-right-radius: 0.1875em;
  }
  .accordion-tabs li.tab-head-cont a {
  text-decoration:none;
  border-top: 1px solid #dddddd;
  color: #888888;
  display: block;
  padding: 0.75em 0.809em;
  }
  .accordion-tabs li.tab-head-cont a:hover {
  color: #000000;
  }
  .accordion-tabs li.tab-head-cont a:focus {
  outline: none;
  }
  .accordion-tabs li.tab-head-cont a.is-active {
  background-color: #f7f7f7;
  border-bottom: 0;
  color:#333333;
  }
  .accordion-tabs li.tab-head-cont section {
  padding: 1.5em 1.618em;
  background: #f7f7f7;
  display: none;
  overflow: hidden;
  width: 100%;
  }
   
/* RESPONSIVE */
@media screen and (min-width: 40em) {
  .accordion-tabs {
  border: none;
  position: relative;
  }
  .accordion-tabs li.tab-head-cont {
  display: inline;
  }
  .accordion-tabs li.tab-head-cont:last-child a {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  }
  .accordion-tabs li.tab-head-cont a {
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  border-top: 0;
  border-top-right-radius: 0.1875em;
  border-top-left-radius: 0.1875em;
  }
  .accordion-tabs li.tab-head-cont a.is-active {
  background-color: #f7f7f7;
  border: 1px solid #dddddd;
  border-bottom: 1px solid #f7f7f7;
  margin-bottom: -1px;
  }
  .accordion-tabs li.tab-head-cont section {
  border-bottom-left-radius: 0.1875em;
  border-bottom-right-radius: 0.1875em;
  border: 1px solid #dddddd;
  float: left;
  left: 0;
  padding: 0.75em 0.809em;
  }
  .accordion-tabs li.tab-head-cont section p {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  }
}
Автор публикации: Загрузка
Загрузка
CreativeBoy, это его n материал
Источник: http://pcvector.net/
  • Всего комментариев: 2

Анаита
0
Анаита написал: Написано 19 Октября 2014 в 16:43
Комментарий №1
Здравствуйте!
У меня вопрос. Я внутри этих адаптивных вкладок разместила список со ссылками. Что сделать чтобы ссылки открывались?

Вовчик
0
Вовчик написал: Написано 26 Октября 2014 в 13:05
Комментарий №2
открывались в новом окне или в текущем?)

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: