Веб-дизайнеру
Веб-разработчику
Дополнительно
Выдвигающееся меню навигации на JQuery
Скачать
Демо
↓ Также Вам будет интересно ↓
Красивое Jquey выдвигающееся меню – предмет нашего сегодняшнего рассмотрения. Какова идея меню? Название меню видно всегда, но при наведении пользователя на один из пунктов, выдвигается иконка. все выглядит довольно стильно. Это фиксированное меню, будет всегда на виду у пользователя вашего сайта, и в то же время, не будет отвлекать. Ещё один пример реализации такого меню в статье “Плавающая панель навигации страниц сайта”.
Значки DryIcons, которые мы используем в данном уроке, служат только примером того, что можно сделать. Так как они не для свободного распространения, поэтому я не могу включить их в ZIP файл исходников. Но Вы можете скачать другие, которые также будут подходит к меню. Хорошо, теперь давайте приступим к работе.
HTML структура
Структура html кода проста – обычный маркированный список, с ссылкой и тегом span внутри:
|
1 2 3 4 5 6 7 8 9 |
<ul id="navigation"> <li class="home"><a href="#"><span>Главная</span></a></li> <li class="about"><a href="#"><span>О нас</span></a></li> <li class="search"><a href="#"><span>Поиск</span></a></li> <li class="photos"><a href="#"><span>Фото</span></a></li> <li class="rssfeed"><a href="#"><span>Rss</span></a></li> <li class="podcasts"><a href="#"><span>Покаст</span></a></li> <li class="contact"><a href="#"><span>Контакты</span></a></li> </ul> |
Теги span будут включать имена пунктов меню.
Список пунктов меню получает ID, потому что мы будем обращаться к нему позже через JavaScript. С JQuery, мы сделаем выпадание пункта, при наведении курсора мыши на элемент списка li.
CSS
Вначале определим стили для нашего списка:
|
1 2 3 4 5 6 7 8 9 10 |
ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; } |
Основные параметры меню:
- Мы позиционируем наше выдвигающееся меню в правом верхнем углу страницы.
- Навигация должна всегда быть доступной для пользователя, даже если он прокручивает страницу, поэтому у нас фиксированное меню. То есть, задаем
fixed. - Отступы
marginиpaddingявно ставим 0, так как в случае с маркированным списком имеются значения по умолчанию. - Навигация должна быть поверх всех других элементов страницы сайта. Вот почему мы устанавливаем очень высокий
z-index. - Ширину в данном случае определяем мы, чтобы элементы внутри были плавающим. Если не дать меню заданную ширину, то элементы начали бы двигаться и перекрывать друг друга при изменении размера страницы. Для того чтобы избежать этого, задаем фиксированную ширину (в нашем случае 721px – сумма все пунктов
li).
Теперь, давайте посмотрим на свойства элементов списка li:
|
1 2 3 4 5 |
ul#navigation li { width: 103px; display:inline; float:left; } |
Для ссылок в списке элементов, определим следующие свойства CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
ul#navigation li a { display: block; float: left; margin-top: -2px; width: 100px; height: 25px; background-color: #E7F2F9; background-repeat: no-repeat; background-position: 50% 10px; border: 1px solid #BDDCEF; text-decoration: none; text-align: center; padding-top: 80px; } |
Это общие стили для ссылок элементов списка. Свойства текста и padding нам нужно установить для тегов span внутри ссылок. И как раз отступ padding будет выдвигать пункты меню вниз.
Давайте добавим некоторые эффекты закругления углов (хотя они не всегда работают в Internet Explorer), и добавим небольшую прозрачность opacity:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#E7F2F9; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; text-decoration:none; text-align:center; padding-top:80px; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } |
Последнее свойство filter задано для Internet Explorer.
Это были общие свойства для всех ссылок элементов внутри элементов списка. Теперь определим фоновое изображение для каждого элемента меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
ul#navigation .home a{ background-image: url(../images/home.png); } ul#navigation .about a { background-image: url(../images/id_card.png); } ul#navigation .search a { background-image: url(../images/search.png); } ul#navigation .podcasts a { background-image: url(../images/ipod.png); } ul#navigation .rssfeed a { background-image: url(../images/rss.png); } ul#navigation .photos a { background-image: url(../images/camera.png); } ul#navigation .contact a { background-image: url(../images/mail.png); } |
При наведении, мы хотим изменить цвет фона для того, чтобы их немного выделить:
|
1 2 3 |
ul#navigation li a:hover{ background-color:#CAE3F2; } |
Теперь нам нужно просто добавить стили для span:
|
1 2 3 4 5 6 |
ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; text-shadow: 0 -1px 1px #fff; } |
Текстовая тень text-shadow придаст буквам выгравированный вид (но это не всегда будет работать в IE).
И это были все необходимые стили CSS. Теперь давайте взглянем на JavaScript, который “вдохнет жизнь” нашей навигации.
JavaScript
С JQuery мы сделать чтобы при загрузке страницы все пункты были видными, но потом сразу спрячем их в стиле “пианино”. При наведении мыши на одн из элементов меню, мы сделаем их сползание вниз. При всем этом, мы определяем следующее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); |
Для создания фортепиано эффекта мы определяем, что для каждого из элементов меню, верхнее значение установлено до -80 пикселей (это сделает плавный перехода за пределами экрана). Эффект для первого элемента должна длиться 300 + 150 миллисекунд, а затем каждый последующий элемент должен исчезнуть с дополнительной задержкой в 150 миллисекунд.
При наведении необходимо, чтобы конкретный элемент получил верхнее значение -2 пикселя, и создать приятную анимацию (скорость в 200 миллисекунд). Если убрать мышь, то элемент возвращается в первоначальное положение (-80 пикселей).
И вот оно, выдвигающееся меню на JQuery! Я надеюсь, что оно Вам понравилось – пользуйтесь!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
