Июнь 19th, 2012 
Archi Разработка веб приложений выросла в одно из очень популярных направлений программирования. Благодаря экспансии jQuery все больше web-дизайнеров начали создавать фантастические анимации и эффекты для своих страниц.
В этой обучающей статье мы создадим выпадающее навигационное меню в стиле web-журнала. При создании этого меню будут использоваться некоторые новомодные техники CSS3, которые будут работать в браузерах, поддерживающих стандарты. Даже если вы немного побаиваетесь jQuery, вы должны разобраться в небольшом количестве кода, и возможно почерпнуть что-нибудь новое для себя. Посмотрите небольшой демо-скрипт в моем примере.
Проверьте работу меню
-
Структура HTML нашей странички
Начать мы должны с основной разметки страницы. Я сделал это в HTML, используя в качестве пунктов меню ненумерованный список. Для сохранения места, CSS стили и библиотека jQuery будут подключены из внешних файлов. Приведенный ниже код, это заголовок нашего HTML кода.
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DesignShack Sexy Magazine-Style Dropdown Menu</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> </head>
Библиотека jQuery v1.6.2 храниться на серверах Google. Это может уменьшить загруженность ваших серверов. Отличия особенно заметны, если вы обрабатываете данные десятков, сотен, тысяч посетителей в день. Тип документа я установил как HTML5, но это не должно повлиять на работу нашего скрипта.
Давайте рассмотрим содержимое элемента body, которое приведено ниже. Я убрал конечный код jQuery, мы рассмотрим его позже.
<div id="head"> <div class="wrap"> <h1><img src="images/logo.jpg" alt="Blog Magazine Logo" /></h1> </div> </div> <div class="wrap"> <ul id="nav"> <li><a href="#">Homepage</a></li> <li><a href="#">About the Mag</a> <ul> <li><a href="#">Company</a></li> <li><a href="#">Authors</a></li> <li><a href="#">Write for Us?</a></li> <li><a href="#">Advertising</a></li> <li><a href="#">Get in Touch</a></li> </ul> </li> <li><a href="#">Freebies</a> <ul> <li><a href="#">PSD</a></li> <li><a href="#">AI Vectors</a></li> <li><a href="#">Patterns</a></li> <li><a href="#">Icons</a></li> </ul> </li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP MySQL</a></li> <li><a href="#">Ruby on Rails</a></li> </ul> </li> <li><a href="#">Web Tools</a> <ul> <li><a href="#">Performance</a></li> <li><a href="#">Browser Testing</a></li> <li><a href="#">CMS Plugins</a></li> <li><a href="#">Cheat Sheets</a></li> </ul> </li> <li><a href="#">Originals</a> <ul> <li><a href="#">Website Design</a></li> <li><a href="#">Mobile</a></li> <li><a href="#">User Interface</a></li> <li><a href="#">Freelancing</a></li> <li><a href="#">Inspiration</a></li> </ul> </li> </ul> </div>
На этом основная структура HTML окончена. Все вложенные списки созданы при помощи элементов ul, которые расположены внутри родительского пункта меню. Не очень трудно даже для тех, кто имеет начальные знания в веб дизайне и программировании. Давайте перейдем к CSS стилям.
Дизайн при помощи CSS
Файл style.css прикрепленный к демо-коду, я разобью на маленькие части. Начнем мы с группы блоков расставляющих отступы/поля для всего документа. Что-то типа простенького ресета для основной страницы.
* { margin: 0; padding: 0; }
body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }
/* @group structure */
#head { background: #e1ecf6; height: 100px; padding-top: 15px; border-bottom: 1px solid #d5dce8; }
.wrap { width: 800px; margin: 0 auto; }
Заголовок будет содержать маленькую картинку-логотип, который я сделал в Photoshop. Я использовал класс .wrap, поэтому мы сможем использовать те же стили и для нашго меню. Этот класс создает div блок шириной 800px и размещает его по центру страницы.
Следующая группа стилей немного больше, тут присваиваются стили для нижней части меню и ее пунктов. Селектор #nav указывает на ненумерованный список элементов, поэтому мы можем использовать его позже для всех под-элементов ul.
/* @group core nav menu */
#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8;
border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px;
height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; }
#nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }
#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none; color: #818ba3; zoom: 1;
border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }
#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }
Для корневого ul я добавил 3 сплошные границы: слева, справа и снизу. Верхняя граница простирается на всю страницу целиком и образует шапку сайта. Так же я скруглил нижний левый и правый углы. В CSS3 это реализуется при помощи -moz, -webkit; и стандартного свойства border-radius.
Пунктам выпадающего меню присвоим свойство z-index равным 999, для отображения его поверх всех других элементов. Таким образом, мы будем наводить мышь на исходный li нашего подменю и потеряем эффект всплывания. Взамен расширим элемент li, чтобы он занял всю высоту нашего нового всплывающего меню и оставался вверху, пока наведена мышь. Для абсолютного позиционирования внутреннего списка добавлено свойство position:relative.
Якорные ссылки не слишком интересны сами по себе. При наведении курсором, они подсвечиваются белым фоном, а слева и справа появляются две дополнительные границы. В последнем селекторе hover я добавил класс .hov, который будет использоваться jQuery. Это позволит сделать так, чтобы при наведении курсора мыши на подменю, пункт основного меню оставался выбранным.
Стили подменю
Последняя группа блоков CSS кода будет стилизировать ссылки нашего подменю. Для размещения ul элементов подменю непосредственно в верхней части контейнера мы используем абсолютное позиционирование. Великолепный эффект падающей тени получается если использовать некоторые новые свойства CSS3.
/* @group subnav */
#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); padding-bottom: 3px; }
#nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }
#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }
Я использовал индивидуальные свойства для каждого браузера и их использование может сбить с толку. Ниже приведен небольшой гид по расшифровке.
- -moz-box-shadow – Firefox/Mazila Engine
- -o-box-shadow – Opera
- -webkit-box-shadow – стандартные браузеры WebKit, Google Chrome или Safari
- box-shadow – большинство других включая Microsoft Internet Explorer
Ширина каждого пункта подменю -180px. Это определяет максимальный размер нашего меню которое будет всплывать. Если вы скопируете код, вы должны подогнать размеры под ваш шаблон.
#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent;
text-transform: uppercase; color: #797979; font-weight: normal; }
#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }
* html #nav ul { margin: 0 0 0 -2px; }
Высота каждого якоря подменю и высота строки устанавливается в 20px. Это сохранит текст меню центрированным по высоте в каждом блоке меню. В эффекте наведения я скрыл границы, которые унаследованы от родительского пункта меню. И в конце чуть-чуть JavaScript для того чтобы собрать все вместе.
jQuery показывает/скрывает подменю
Сразу после последнего div блока .wrap, наша область контента заканчивается. Поэтому прямо тут я размещу тег <script> и помещу весь код jQuery внутрь.
$(document).ready(function() {
$('#nav li').hover(function() {
$('ul', this).slideDown(200);
$(this).children('a:first').addClass("hov");
},
function() {
$('ul', this).slideUp(100);
$(this).children('a:first').removeClass("hov");
});
});
Скрипт запустится после того как страница полностью загрузится. Мы хотим запустить нашу первую функцию после того как пользователь наведет курсор на пункт меню корневого ul элемента #nav. Первый блок кода функции состоит из двух строк.
Он запускает наши вложенные ul элементы и добавляет эффект плавного выпадения, который длиться 200 миллисекунд. Во-вторых мы должны добавить класс .hov на выбранной якорной ссылке. Это сохранит эффект наведения в главном меню, даже когда перемещаешься по пунктам подменю. Вторая функция это коллбэк-параметр метода .hover() который запускается когда курсор мыши уводится с элемента.
Он также состоит из 2 простых строк кода. В них выполняется противоположное тому, что мы делали в первом блоке кода. Внутренняя ul сворачивается быстрей (100 миллисекунд), после этого и мы удаляем класс hover.
Итог
Я сделал меню достаточно простым, поэтому каждый дизайнер сможет настроить его под свой сайт. Впечатляет, что может получиться из пары строк в jQuery! Если вы что-нибудь подобное реализовали на своем сайте, пожалуйста, дайте нам знать. И не забудьте загрузить и попрактиковаться с демо кодом.
Источник: css-live.ru
Опубликовано в рубрике 
Метки: