Веб-дизайнеру
Веб-разработчику
Дополнительно
Красивое меню CSS3 + JQuery с выпадающими иконками
Скачать
Демо
↓ Также Вам будет интересно ↓
Сегодня я хочу показать вам, как создать css меню в стиле Apple. И сегодня мы создадим кое-что очень интересное, и красивое. Также читайте о том, как создать меню в стиле Apple iMac на CSS3.
Это красивое меню css очень похоже на стиль навигации Apple, но изюминка этого меню в том, что при наведении на пункт меню, раскрывается иконка. Иконки выдвигаются сверху,а когда пользователь убирает курсор мыши, значок скользит назад. Это создает аккуратный эффект “перетасовка карт”.
Иконки, используемые в данном уроке, можно найти на сайте DryIcons.com. Я не могу из распространять, поэтому их нет в файле исходников ZIP. Но вы можете легко найти их . Пути иконок все же уже прописаны, так что вы можете легко добавить иконки навигации, без изменения названия или стилей.
Хорошо, давайте приступим!
HTML разметка
Разметка просто состоит из тега div, внутри которого присутствует обычный маркированный список. Элементы списка li содержат: span для значка и ссылку навигации:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="navigation"> <ul class="menu" id="menu"> <li><span class="ipod"></span><a href="" class="first">Плееры</a></li> <li><span class="video_camera"></span><a href="">Камеры</a></li> <li><span class="television"></span><a href="">ТВ</a></li> <li><span class="monitor"></span><a href="">Экраны</a></li> <li><span class="toolbox"></span><a href="">Утилиты</a></li> <li><span class="telephone"></span><a href="">Телефоны</a></li> <li><span class="print"></span><a href="" class="last">Принтеры</a></li> </ul> </div> |
Ничего особенного, самое главное – стили, поэтому переходим к ним.
CSS стили
Стили для обертки navigation навигации и списка ul будут следующими:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.navigation{ position:relative; margin:0 auto; width:915px; } ul.menu{ list-style:none; font-family:"Verdana",sans-serif; border-top:1px solid #bebebe; margin:0px; padding:0px; float:left; } ul.menu li{ float:left; } |
Так как мы делаем список меню с помощью float, нам понадобится применить relative для иконок. Значки, которые будут заданы фоновым изображением для каждого span, будут иметь абсолютное позиционирование. Что необходимо сделать, так это определить z-index, то есть находится элемент вверху или снизу. Так как мы хотим, чтобы значки появлялись сверху, а затем исчезают под пунктом меню, мы будем иметь дело с z-index. И абсолютное позиционирование элементов нам создать это красивое меню.
Теперь, давайте определим стиль для ссылок списка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
ul.menu li a{ text-decoration:none; background:#7E7E7E url(../images/bgMenu.png) repeat-x top left; padding:15px 0px; width:128px; color:#333333; float:left; text-align:center; border-right:1px solid #a1a1a1; border-left:1px solid #e8e8e8; font-weight:bold; font-size:13px; -moz-box-shadow: 0 1px 3px #555; -webkit-box-shadow: 0 1px 3px #555; text-shadow: 0 1px 1px #fff; } |
Мы дадим для ссылки фиксированную ширину, а также красивый фон. Границы возле ссылок придадут более красивый вид.
Эффект выдвигающихся иконок мы создадим с помощью JQuery, чтобы избежать мерцания элементов и некоторых проблем:
|
1 2 3 4 5 |
ul.menu li a.hover{ background-image:none; color:#fff; text-shadow: 0 -1px 1px #000; } |
Первый и последний пункт меню должен иметь скругления на соответствующих сторонах, поэтому мы определяем следующее:
|
1 2 3 4 5 6 7 8 9 |
ul.menu li a.first{ -moz-border-radius:0px 0px 0px 10px; -webkit-border-bottom-left-radius: 10px; border-left:none; } ul.menu li a.last{ -moz-border-radius:0px 0px 10px 0px; -webkit-border-bottom-right-radius: 10px; } |
Общие стили для всех тегов span будут такими:
|
1 2 3 4 5 6 7 8 9 10 |
ul.menu li span{ width:64px; height:64px; background-repeat:no-repeat; background-color:transparent; position:absolute; z-index:-1; top:80px; cursor:pointer; } |
Также фоновое изображение и x-position для иконок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
ul.menu li span.ipod{ background-image:url(../icons/ipod.png); left:33px; /*128/2 - 32(half of icon) +1 of border*/ } ul.menu li span.video_camera{ background-image:url(../icons/video_camera.png); left:163px; /* plus 128 + 2px of border*/ } ul.menu li span.television{ background-image:url(../icons/television.png); left:293px; } ul.menu li span.monitor{ background-image:url(../icons/monitor.png); left:423px; } ul.menu li span.toolbox{ background-image:url(../icons/toolbox.png); left:553px; } ul.menu li span.telephone{ background-image:url(../icons/telephone.png); left:683px; } ul.menu li span.print{ background-image:url(../icons/print.png); left:813px; } |
Как вы можете видеть, мы позиционируем иконки таким образом, что они расположены внутри элемента списка. Первоначально все иконки опущены на 80px, чтобы показать их пользователю. Сразу после загрузки страницы, мы скрываем их с удивительным эффектом “лестницы”!
JavaScript
Во-первых, мы хотим создать эффект исчезновения иконок в виде “лестницы”, поэтому задаем функцию:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$(function() { var d=1000; $('#menu span').each(function(){ $(this).stop().animate({ 'top':'-17px' },d+=250); }); $('#menu > li').hover( function () { var $this = $(this); $('a',$this).addClass('hover'); $('span',$this).stop().animate({ 'top':'40px' },300).css({ 'zIndex':'10' }); }, function () { var $this = $(this); $('a',$this).removeClass('hover'); $('span',$this).stop().animate({ 'top':'-17px' },800).css({ 'zIndex':'-1' }); } ); }); |
При наведении, мы добавляем класс "hover" для ссылки, и значок появляется сверху, за счет увеличенного z-index. Когда мы убираем мышь, мы делаем с точностью до наоборот, и иконка прячется. Для мы имеем немало времени (800 миллисекунд), потому, что это такой интересный эффект не должен остаться незамеченным пользователем!
И это все! Красивое меню css + JQuery готово! к использованию. Я надеюсь, Вам понравилось!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
