Создаем анимированные вкладки на jQuery
Свободного места на сайте всегда не много, и по этому необходимо правильно и грамотно использовать свободное пространство проекта. Это позволит визуально разгрузить сайт, тем самым выделив нужную информацию на сайте. Ресурс станет более чище и проще в читаемости. В данном уроке мы рассмотрим процесс создание замечательных анимированных вкладок при помощи jquery и css. Данные вкладки стали весьма популярны в веб-мастеров из-за своей практичности и удобства в работе. Идея заключается в том, что вкладки меняются с плавной анимацией..
, и своеобразной прокруткой содержимого контента. И так, начнем, для начала рассмотрим структуру HTML. Первое, что нам необходимо сотворить, так это ненумерованный список, который будет содержать 4 элемента. Родительскому контейнеру зададим id ‘navbar’. Три элемента списка должны содержать в себе класс ‘inactive’ и один элемент (тот, что будет показан пользователю) будет содержать класс ‘active’. Также нам понабится отдельный блок для добавления заметок, такой как ‘Новости’ и ‘Соглашение’, так что вам необходимо создать span, которому необходимо присвоить класс ‘notification’.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Заголовок</pre> <div id="navbar"> <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’), то вам необходимо ещё добавить пару элементов в список.
1 2 3 4 5 6 7 8 9 10 11 |
</pre> <div id="slider"> <h2>..Заголовок..</h2> ..Описание.. <h2>..Заголовок..</h2> ..Описание.. <h2>..Заголовок..</h2> ..Описание.. <h2>..Заголовок..</h2> ..Описание..</div> <pre> |
На данный момент всё это действительно должно выглядеть так, как вы это видите. Для того чтобы всё было цивильно, нам необходимо добавить немного CSS.
Если вы привыкли к особым файлам, которые сбрасывают начальные настройки CSS стилей, то используйте их. Нам же хватит и такого куска кода.
1 2 3 4 5 6 7 8 9 10 |
* { 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. Если вы хотите, можете изменить цвет текста и многое другое.
1 2 3 |
a { text-decoration: none; } |
Далее мы оформим тег заголовка h2. Тут тоже ничего особенного кроме свойства text-shadow. Первый аргумент — это координаты по оси x, второй — по оси y, третий – насыщенность, четвёртый — цвет.
1 2 3 4 5 6 7 8 9 10 |
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. Это конечно только лишь моё мнение. Но думаю, что если добавить сюда поддержку жирного шрифта, будет великолепно:
1 2 3 4 5 |
#navbar { margin: 20px 0 0 40px; width: 650px; font-weight: bold; } |
Все элементы списков должны отображаться как inline block. Позиция элемента ссылки в списке ul li a выставлена как relative. Всё это необходимо отображать как блоки, ширина которых должна составлять 150px, и текст должен располагаться по центру. Если проделать всё, что я только что написал, то мы можем гарантированно заявить, что все элементы списка будут иметь одну и ту же ширину.
1 2 3 4 5 6 7 8 9 10 |
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’.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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’.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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 для того, чтобы создать небольшое расстояние между кругом и ссылкой.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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 нет (или наоборот), то вы можете использовать для этого специальный софт, которого в интернете целая куча.
1 2 3 4 5 6 7 |
#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. Для этого вам необходимо вставить следующий код.
1 2 3 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script type="text/javascript">// <![CDATA[ // ]]></script> |
1 2 |
$(document).ready(function(){ }); |
1 2 |
$('li').click(function(){ }); |
1 2 3 |
$('li').click(function(){ var number = $(this).index(); }); |
1 2 3 4 5 |
$('li').click(function(){ var number = $(this).index(); $('h2').hide().eq(number).show(); $('p').hide().eq(number).show(); }); |
В этом фрагменте кода нет ничего сложного. Он делает выборку всех элементов ‘h2’ (и параграфов ‘p’) , а потом делает их невидимыми. Элементы, которые нам необходимо отображать мы вычисляем благодаря индексу и функции (eq). Подробное описание данной функции вы можете найти на сайте jQuery. Далее нам необходимо изменить очерёдность классов active и inactive.
1 2 3 4 5 6 7 |
$('li').click(function(){ var number = $(this).index(); $('h2').hide().eq(number).show(); $('p').hide().eq(number).show(); $(this).toggleClass('active inactive'); $('li').not(this).removeClass('active').addClass('inactive'); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(document).ready(function(){ $('li').click(function(){ var number = $(this).index(); $('h2').hide().eq(number).show(); $('p').hide().eq(number).show(); $(this).toggleClass('active inactive'); $('li').not(this).removeClass('active').addClass('inactive'); }); $('h2').not(':first').hide(); $('p').not(':first').hide(); }); |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 03.02.2012 в 02:54, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |