| Главная » Файлы » Прочие скрипты » 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 Материал перевел и подготовил САМИ-ЗНАЕТЕ-КТО  И на это всем спасибо , пойду дальше спать )) | |
| Просмотров: 1036 | Загрузок: 241 | Комментарии: 4 | | |
| Всего комментариев: 4 | |||||
| |||||
