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


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

2704
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 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Ох. Вижу, что обсуждение очень старое. Но!
На других CMS так же будет все это реализовано. На нормальных CMS.
Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
    Последние темы
    Опрос
    432
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: