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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот что в итоге у нас вышло:

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