Главная » Файлы » Прочие скрипты » jQuery

TAB стили Вдохновения
[ Скачать с сервера (130.3 Kb) ] 14.09.14, 16:29:58



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

Для демонстрации использован макет flexbox , по-этому убедитесь что вы просматриваете демо в современном браузере !

В большинстве вкладок используются иконки от Elegant Themes Line Icon Set

Для функциональности вкладок использован Responsive Blueprint Full Width Tabs и отрегулирован для наших нужд.

Основной обобщенный стиль вкладок есть в файле tabs.css и индивидуальные стили можете посмотреть в файле tabstyles.css

Смотрим ДЕМО

Ну и начнем же наш материал с примеров )) :

Для начала уважаемый читатель нам стоит подключить стили и js файлы!
Из прикрепленного архива файлы css в папку css заливаем , файлы js в папку js , и прописываем в << head текст /head >>
Код
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/tabs.css" />
<link rel="stylesheet" type="text/css" href="css/tabstyles.css" />
<script src="js/modernizr.custom.js"></script>


Ну и первый пример -->



Код самого переключателя :
Код
<section>
  <div class="tabs tabs-style-bar">
  <nav>
  <ul>
  <li><a href="#section-bar-1" class="icon icon-home"><span>Home</span></a></li>
  <li><a href="#section-bar-2" class="icon icon-box"><span>Archive</span></a></li>
  <li><a href="#section-bar-3" class="icon icon-display"><span>Analytics</span></a></li>
  <li><a href="#section-bar-4" class="icon icon-upload"><span>Upload</span></a></li>
  <li><a href="#section-bar-5" class="icon icon-tools"><span>Settings</span></a></li>
  </ul>
  </nav>
  <div class="content-wrap">
  <section id="section-bar-1"><p>1</p></section>
  <section id="section-bar-2"><p>2</p></section>
  <section id="section-bar-3"><p>3</p></section>
  <section id="section-bar-4"><p>4</p></section>
  <section id="section-bar-5"><p>5</p></section>
  </div><!-- /content -->
  </div><!-- /tabs -->
  </section>


Вставляем куда вам удобно!

Другие примеры представлены в архиве материала , можете выбрать себе любой другой !

Автор работы прекрасная и очень креативная девушка по имени MARY LOU

Материал перевел и подготовил САМИ-ЗНАЕТЕ-КТО biggrin

И на это всем спасибо , пойду дальше спать ))
Категория: jQuery | Добавил: m1haluc4 | Теги: стили, Tab, вдохновения
Просмотров: 879 | Загрузок: 152 | Комментарии: 4 | Рейтинг: 1.0/5
Всего комментариев: 4
0
Автор, не до конца изучил материал. После кода переключателя надо подключить еще один скрипт
Код
<script src="js/cbpFWTabs.js"></script>
  <script>
  (function() {

  [].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {
  new CBPFWTabs( el );
  });

  })();
  </script>

и вот тогда он будет полностью работать + там около 15 видов вкладок, тем кому не лень в архиве файл index.html откройте и полистайте его

0
Спасибо за старания!  happy

0
Ты прав черт возьми biggrin

0
С моим нубством, я пол дня потратил, что бы понять какого макара он не работает  wacko biggrin

Имя *:
Email: