Создаем оригинальные анимированные вкладки на jQuery

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

, и своеобразной прокруткой содержимого контента. И так, начнем, для начала рассмотрим структуру HTML. Первое, что нам необходимо сотворить, так это ненумерованный список, который будет содержать 4 элемента. Родительскому контейнеру зададим id ‘navbar’. Три элемента списка должны содержать в себе класс ‘inactive’ и один элемент (тот, что будет показан пользователю) будет содержать класс ‘active’. Также нам понабится отдельный блок для добавления заметок, такой как ‘Новости’ и ‘Соглашение’, так что вам необходимо создать span, которому необходимо присвоить класс ‘notification’.

Заголовок</pre>

<ul>

<li><a title="Projects" href="#">Новости<span>+28</span></a></li>

<li><a title="Contacts" href="#">Контакты</a></li>

<li><a title="Earnings" href="#">О сайте</a></li>

<li><a title="To-do" href="#">Соглашение</a></li>

</ul>

</div>

<pre>

Теперь создадим ещё один блок div, но на этот раз зададим ему id ‘slider’. Сюда вы будете добавлять всякого разного рода контент, это будут заголовки ‘h2’и какой-то текст, заключённый в теги параграфа ‘p’. (Вы можете делать всё, что хотите, менять текст и так далее, но не вздумайте менять теги, ибо от этого зависит работа данного скрипта. Если вы добавите ещё заголовков (допустим парочку ‘h2’), то вам необходимо ещё добавить пару элементов в список.

</pre>

<h2>..Заголовок..</h2>

..Описание..

<h2>..Заголовок..</h2>

..Описание..

<h2>..Заголовок..</h2>

..Описание..

<h2>..Заголовок..</h2>

..Описание..</div>

<pre>

На данный момент всё это действительно должно выглядеть так, как вы это видите. Для того чтобы всё было цивильно, нам необходимо добавить немного CSS.

Если вы привыкли к особым файлам, которые сбрасывают начальные настройки CSS стилей, то используйте их. Нам же хватит и такого куска кода.

* {

margin: 0;

padding: 0;

}

body {

font-family: helvetica, tahoma, Sans-serif;

font-size: 13px;

background: url(images/header.jpg) repeat;

}

Теперь установим внешние и внутренние отступы всех элементов в 0 (используя знак ‘*’), шрифт будет у нас helvetica/tahoma/sans-serif, а его размер будет составлять 13px. Также телу страницы мы присвоим специальный фон. Убедитесь в том, что вы указали ключевое слово repeat, для того, чтобы заданный фон распространялся на всю страницу. Теперь нам необходимо оформить ссылки, но совсем немного. Хватить только вот этой записи text-decoration: none. Если вы хотите, можете изменить цвет текста и многое другое.

a {

text-decoration: none;

}

Далее мы оформим тег заголовка h2. Тут тоже ничего особенного кроме свойства text-shadow. Первый аргумент — это координаты по оси x, второй — по оси y, третий – насыщенность, четвёртый — цвет.

h2 {

font-family: Helvetica, tahoma, Sans-serif;

font-size: 25px;

font-weight: bold;

text-shadow: 0 1px 1px white;

}

p {

text-shadow: 0 1px 1px white;

}

Далее следует блок навигации. Его ширина будет составлять 650px, а внешние отступы (top, right, bottom, left) 20px, 0, 0 и 40px. Это конечно только лишь моё мнение. Но думаю, что если добавить сюда поддержку жирного шрифта, будет великолепно:

#navbar {

margin: 20px 0 0 40px;

width: 650px;

font-weight: bold;

}

Все элементы списков должны отображаться как inline block. Позиция элемента ссылки в списке ul li a выставлена как relative. Всё это необходимо отображать как блоки, ширина которых должна составлять 150px, и текст должен располагаться по центру. Если проделать всё, что я только что написал, то мы можем гарантированно заявить, что все элементы списка будут иметь одну и ту же ширину.

ul li{

display: inline-block;

}

ul li a {

position: relative;

display: block;

width: 150px;

text-align: center;

}

Две вещи, которые я хотел бы отметить: недавно я обнаружил замечательное значение свойства ‘-webkit-background—clip: padding-box’. Тут вы можете поэкспериментировать с шириной границы в радиусе элемента. Мы так же используем Z-index для того, чтобы определить порядок элементов, в котором они должны появляться на странице. Для того чтобы устранить все отступы, которые возникают при наведении мыши, нам необходимо написать несколько свойств для псевдо класса ‘:focus’.

.active a{

padding: 28px 0 20px 0;

background: -webkit-gradient(linear, left top, left bottom, from(#db0000), to(#9b0000));

background: -moz-linear-gradient(top center, #db0000, #9b0000);

border: 1px solid #8d0000;

text-shadow: 0 1px 1px black;

-webkit-border-radius: 10px 10px 0 0;

-webkit-background-clip: padding-box;

-webkit-box-shadow: inset 0 0 1px #fd0000;

-moz-border-radius: 10px 10px 0 0;

-moz-background-clip: padding-box;

-moz-box-shadow: inset 0 0 1px #fd0000;

margin-left: -5px;

z-index: 2;

color: white;

text-shadow: 0 1px 1px black;

}

.active a:focus {

outline: none;

}

Следующим оформим класс inactive. Как вы уже могли догадаться, он мало чем будет отличаться от класса active. Мы ему зададим чуть меньше внутренние отступы, другой градиент и радиус границы. На этот раз выставим значение z-index в 1, т.к. активная кнопка должна быть выше неактивной. Так же, как и в прошлом случае, добавим несколько стилей для псевдо класса ‘:focus’.

.inactive a:hover {

background: -webkit-gradient(linear, left bottom, left top, from(#eee), to(#ddd));

background: -moz-linear-gradient(top center, #ddd, #eee);

}

.inactive a {

color: #222;

text-shadow: 0 1px 1px white;

background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));

background: -moz-linear-gradient(top center, #eee, #ddd);

-webkit-box-shadow: inset 0 0 5px white;

-moz-box-shadow: inset 0 0 5px white;

padding: 20px 0;

-webkit-box-shadow: inset 0 0 5px white;

-moz-box-shadow: inset 0 0 5px white;

border: 1px solid #ccc;

margin-left: -5px;

z-index: 1;

}

.inactive a:focus {

outline: none;

}

Вот почти и всё (ну по крайней мере, со стилями). Теперь нам необходимо оформить блок, где будут располагаться заметки. Будьте уверены, что вы указали свойство min-width в 15px, чтобы соблюсти пропорции элементов на странице, и добавьте margin-left для того, чтобы создать небольшое расстояние между кругом и ссылкой.

span.notification {

position: absolute;

padding: 5px;

margin-top: -6px;

color: white;

min-width: 15px;

text-align: center;

border: 1px solid #000;

background: -webkit-gradient(linear, left top, left bottom, from(#2a2a2a), to(#222));

background: -moz-linear-gradient(top center, #2a2a2a, #222);

-webkit-box-shadow: inset 0 0 1px #333;

-moz-box-shadow: inset 0 0 1px #333;

text-shadow: 0 -1px 1px black;

-webkit-border-radius: 50px;

-moz-border-radius: 50px;

margin-left: 10px;

}

Последнее, что нам осталось оформить, это блок, который будет содержать основной контент. Выставите ему ширину 555px. Если в дальнейшем вы каким-то образом захотите увеличить ширину элементов списка, то вам так необходимо будет затронуть и это значение (555px). Цвет фона я выставил следующим образом ‘rgba(255,255,255,0.3)’. Для кого-то это может быть и ново. Первые три значения (разделённые запятыми) это привычные вам значения RGB (белый -> #fff -> 255,255,255). Последний аргумент — это прозрачность, которая может варьировать от 0 (прозрачный) до 1 (100% виден). Если вам известно hex значение цвета, а RGB нет (или наоборот), то вы можете использовать для этого специальный софт, которого в интернете целая куча.

#slider {

width: 555px;

background: rgba(250,250,250,0.3);

padding: 30px 25px 30px 25px;

line-height: 25px;

margin-left: 35px;

}

Теперь наш дизайн должен выглядеть довольно-таки симпатично, за исключением одной детали: попробуйте нажать на ссылку. Вот как раз тут нам и надо добавить немного jQuery. В следующем фрагменте нет ничего сложного. В разделе head, мы импортируем нашу любимую JavaScript библиотеку из хранилища Google. Для этого вам необходимо вставить следующий код.

// ]]></script>

Начнём, традиционно после полной загрузки документа document -> ready -> function.

1 2	$(document).ready(function(){ });

Далее нам необходимо создать обработчик, который будет срабатывать при клике. Когда пользователь нажмёт на элемент списка ‘li’, выполнится содержание функции.

1 2	$('li').click(function(){ });

Для начала нам необходимо определить переменную ‘number’ и выставить для неё соответствующий индекс. ‘This’ это элемент ‘li’, на который нажал пользователь. По той причине, что у нас нет отдельного класса для каждого элемента списка, мы будем использовать функцию ‘.index()’ для того, чтобы получить порядковый номер элемента.

$('li').click(function(){

var number = $(this).index();

});

Далее следует вот такой код:

$('li').click(function(){

var number = $(this).index();

$('h2').hide().eq(number).show();

$('p').hide().eq(number).show();

});

В этом фрагменте кода нет ничего сложного. Он делает выборку всех элементов ‘h2’ (и параграфов ‘p’) , а потом делает их невидимыми. Элементы, которые нам необходимо отображать мы вычисляем благодаря индексу и функции (eq). Подробное описание данной функции вы можете найти на сайте jQuery. Далее нам необходимо изменить очерёдность классов active и inactive.