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

2855
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 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Радио не стоит на месте новая версия вам 1.5:
    Что нового:
    1. Media Session - позволит вам переключать из бара браузера радио, а также на блоке экрана.
    2. Новые радиостанции.
    3. Новый API код.

    Демо: fiddle
    Реальная полная версия: woobl
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
    Последние темы
    Опрос
    259
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: