Красивое меню CSS3 + JQuery с выпадающими иконками | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryКрасивое меню CSS3 + JQuery с выпадающими иконками
Дата: 08.05.2013 в 01:38 | Просмотров: 3667

Красивое меню CSS3 + JQuery с выпадающими иконками

Красивое меню CSS3 с выпадающими иконками
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня я хочу показать вам, как создать css меню в стиле Apple. И сегодня мы создадим кое-что очень интересное, и красивое. Также читайте о том, как создать меню в стиле Apple iMac на CSS3.

Это красивое меню css очень похоже на стиль навигации Apple, но изюминка этого меню в том, что при наведении на пункт меню, раскрывается иконка. Иконки выдвигаются сверху,а когда пользователь убирает курсор мыши, значок скользит назад. Это создает аккуратный эффект “перетасовка карт”.

Иконки, используемые в данном уроке, можно найти на сайте DryIcons.com. Я не могу из распространять, поэтому их нет в файле исходников ZIP. Но вы можете легко найти их здесь. Пути иконок все же уже прописаны, так что вы можете легко добавить иконки навигации, без изменения названия или стилей.

Хорошо, давайте приступим!

HTML разметка

Разметка просто состоит из тега div, внутри которого присутствует обычный маркированный список. Элементы списка li содержат: span для значка и ссылку навигации:

Ничего особенного, самое главное – стили, поэтому переходим к ним.

CSS стили

Стили для обертки navigation навигации и списка ul будут следующими:

Так как мы делаем список меню с помощью float, нам понадобится применить relative для иконок. Значки, которые будут заданы фоновым изображением для каждого span, будут иметь абсолютное позиционирование. Что необходимо сделать, так это определить z-index, то есть находится элемент вверху или снизу. Так как мы хотим, чтобы значки появлялись сверху, а затем исчезают под пунктом меню, мы будем иметь дело с z-index. И абсолютное позиционирование элементов нам создать это красивое меню.

Теперь, давайте определим стиль для ссылок списка:

Мы дадим для ссылки фиксированную ширину, а также красивый фон. Границы возле ссылок придадут более красивый вид.

Эффект выдвигающихся иконок мы создадим с помощью JQuery, чтобы избежать мерцания элементов и некоторых проблем:

Первый и последний пункт меню должен иметь скругления на соответствующих сторонах, поэтому мы определяем следующее:

Общие стили для всех тегов span будут такими:

Также фоновое изображение и x-position для иконок:

Как вы можете видеть, мы позиционируем иконки таким образом, что они расположены внутри элемента списка. Первоначально все иконки опущены на 80px, чтобы показать их пользователю. Сразу после загрузки страницы, мы скрываем их с удивительным эффектом “лестницы”!

JavaScript

Во-первых, мы хотим создать эффект исчезновения иконок в виде “лестницы”, поэтому задаем функцию:

При наведении, мы добавляем класс "hover" для ссылки, и значок появляется сверху, за счет увеличенного z-index. Когда мы убираем мышь, мы делаем с точностью до наоборот, и иконка прячется. Для мы имеем немало времени (800 миллисекунд), потому, что это такой интересный эффект не должен остаться незамеченным пользователем!

И это все! Красивое меню css + JQuery готово! к использованию. Я надеюсь, Вам понравилось!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net/codrops
Перевел: Владислав Бондаренко


Добавить комментарий