Простенькие, адаптивные вкладки для Вашего сайта
827материалов
228тем на форуме
3003комментария
6154пользователя

Простенькие, адаптивные вкладки для Вашего сайта


Описание:

Создание адаптивных вкладок с элементами адаптивности очень полезно для современного веб-дизайна, когда нужно организовать значительное количество внутреннего содержания. Это очень распространено, использование вкладок на странице продукта весьма облегчает навигацию, например вы можете добавить текстовую информацию, медиафайлы, и т.д. при этом пользователь не будет переходить на различные страницы, а по умолчанию эта информация не будет нагромождать визуально сайт.

Мы будем использовать достаточно простой код, чтобы максимально упростить структоризацию панелей и интеграцию ее в ваш проект. Кроме этого мы учли, что данный дизайн разрабатывается не только для десктопного отображения, но и для мобильных устройств, что отобразится на масштабировании и адаптивности наших вкладок. И так, давайте приступим.

Установка:

Для начала подключаем стили между <head></head>:
Код
<style>
@import url(http://fonts.googleapis.com/css?family=Quicksand);
@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.clearfix:after, .container:after, .tab-nav:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}
*, *:before, *:after {
      box-sizing: border-box;
}
.container {
      position: relative;
      background: white;
      padding: 3em;
      border-radius: 10px;
}
.tab-group {
      position: relative;
      border: 1px solid #eee;
      margin-top: 2.5em;
      border-radius: 0 0 10px 10px;
}
.tab-group section {
      opacity: 0;
      height: 0;
      padding: 0 1em;
      overflow: hidden;
      transition: opacity 0.4s ease, height 0.4s ease;
}
.tab-group section.active {
      opacity: 1;
      height: auto;
      overflow: visible;
}

.tab-nav {
      list-style: none;
      margin: -2.5em -1px 0 0;
      padding: 0;
      height: 2.5em;
      overflow: hidden;
}
.tab-nav li {
      display: inline;
}
.tab-nav li a {
      top: 1px;
      position: relative;
      display: block;
      float: left;
      border-radius: 10px 10px 0 0;
      background: #eee;
      line-height: 2em;
      padding: 0 1em;
      text-decoration: none;
      color: grey;
      margin-top: .5em;
      margin-right: 1px;
      transition: background .2s ease, line-height .2s ease, margin .2s ease;
}
.tab-nav li.active a {
      background: #6EB590;
      color: white;
      line-height: 2.5em;
      margin-top: 0;
}

      </style>

Где хотите видеть вкладки вставляете код:
Код
<div class="container">
<div class="tab-group">
<section id="tab1" title="Система uCoz">
<h3>Описание системы uCoz</h3>
<p>uCoz — бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием. Модули uCoz могут использоваться как в единой связке для создания полнофункционального сайта, так и по отдельности, например, в качестве блог-платформы, интернет-магазина и др. К 2014 году на его основе было создано более 20 млн страничек (из них активны были около 1 млн), на отдельных доменах работали 54 тыс. сайтов[1]. uCoz.ru находится на 73-м месте самых популярных российских сайтов по данным Alexa Internet.</br>Владелец сервиса — ООО «Юкоз Медиа», Россия.</p>
</section>

<section id="tab2" title="Конструктор uKit">      
<h3>Опыт и инновации</h3>
</p>У нашей компании 10 лет работы в интернете, но этот продукт для нас — совершенно новый. Он сочетает в себе самые последние тенденции веба и надежно базируется на проверенных годами технологиях.<p>
<h3>Никакого кода</h3>
<p>Остальные говорят, что можно без кода — а у нас его в принципе нет. И точно можно сделать, все что нужно вам — без него. Плюс на ваш сайт невозможно загрузить ничего вредоносного.</p>
<h3>Как начать продвижение?</h3>
<p>У нас есть встроенный инструментарий, который подскажет, что и в каком порядке делать. «Индекс готовности» определит, пора ли вам начинать — или нужно еще поработать над сайтом.</p>
</section>

<section id="tab3" title="Конструктор uWeb">
<h3>Факты</h3>
<p><ul>
<li>Крупнейший SaaS провайдер в РФ</li>
<li>Решение, проверенное временем</li>
<li>Подробные инструкции для пользователей</li>
<li>Uptime 99.9%</li>
</ul></p>
<h3>Возможности</h3>
<p><ul>
<li>Хостинг + CMS</li>
<li>Сотни готовых шаблонов</li>
<li>21 модуль, сотни виджетов, 1000 гаджетов</li>
<li>Полнофункциональный интернет-магазин</li>
</ul></p>
<h3>Преимущества</h3>
<p><ul>
<li>Легкость и простота использования</li>
<li>Интуитивно понятный интерфейс</li>
<li>Обновления в фоновом режиме</li>
<li>Повышенная безопасность</li>
</ul></p>
</section>

<section id="tab4" title="uSocial.pro">
<h3>uSocial.pro</h3>
<p><b>uSocial.pro</b> - это удобный конструктор кнопок "Поделиться" и "Мне нравится" для вашего сайта.
</br></br>
Современный вид, самые популярные социальные сети, мобильность, масса тонкостей и настроек, чистый код и аналитика!</p>
</section>

<section id="tab5" title="uID.me - сервис личных страниц">
<h3>uID.me - сервис личных страниц</h3>
<p>Зарегистрируйтесь и создайте уникальное оформление своей страницы, дополните ее информацией о себе из всех социальных сетей, в которых вы зарегистрированы.</p>
</section>
</div>
</div>

Ну и в нижнюю часть перед </body> вставляете код:
Код
<script>
      ;
(function (defaults, $, window, document, undefined) {
      'use strict';
      $.extend({
      tabifySetup: function (options) {
      return $.extend(defaults, options);
      }
      }).fn.extend({
      tabify: function (options) {
      options = $.extend({}, defaults, options);
      return $(this).each(function () {
      var $element, tabHTML, $tabs, $sections;
      $element = $(this);
      $sections = $element.children();
      tabHTML = '<ul class="tab-nav">';
      $sections.each(function () {
      if ($(this).attr('title') && $(this).attr('id')) {
      tabHTML += '<li><a href="#' + $(this).attr('id') + '">' + $(this).attr('title') + '</a></li>';
      }
      });
      tabHTML += '</ul>';
      $element.prepend(tabHTML);
      $tabs = $element.find('.tab-nav li');
      var activateTab = function (id) {
      $tabs.filter('.active').removeClass('active');
      $sections.filter('.active').removeClass('active');
      $tabs.has('a[href="' + id + '"]').addClass('active');
      $sections.filter(id).addClass('active');
      };
      $tabs.on('click', function (e) {
      activateTab($(this).find('a').attr('href'));
      e.preventDefault();
      });
      activateTab($tabs.first().find('a').attr('href'));
      });
      }
      });
}({
      property: 'value',
      otherProperty: 'value'
}, jQuery, window, document));
$('.tab-group').tabify();
      //# sourceURL=pen.js
      </script>

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

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 16.10.2016 в 09:00
Материал просмотрен: 1268 раз
Категория материала: Скрипты для uCoz
К материалу оставлен: 1 комментарий

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

1 комментарий


Бармен
Не плохо сделано happy
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта