3D горизонтальное меню JQuery & CSS3 в стиле Android | Vladmaxi.net
ГлавнаяВеб-разработчикуJQuery3D горизонтальное меню JQuery & CSS3 в стиле Android
Дата: 23.05.2013 в 17:29 | Просмотров: 4681

3D горизонтальное меню JQuery & CSS3 в стиле Android

горизонтальное меню JQuery, jquery меню для сайта
Скачатьбесплатно с сервера
Демодемонстрация

В этом уроке речь пойдет про JQuery меню для сайта. При использовании устройства Galaxy Tab, там можно увидеть причудливое меню Dock Android. Значок программы выскакивает последовательно, после щелчка на стрелку, и происходит анимация не только иконок, но и самого горизонтального меню, вращающегося вертикально в 3D-стиле. В этом уроке мы будем создавать 3D горизонтальное меню JQuery и CSS3.

Поведение горизонтального меню

Как писалось выше, когда пользователь нажимает на изображение стрелки, значки пунктов меню будут последовательно выскакивать снизу, а по умолчанию они скрыты за меню. Наряду с анимацией выскакивания иконок, меню также будет вращаться вертикально, в направлении сверху вниз в 3D-стиле. Это будет происходить после нажатия на стрелку вверх.

горизонтальное меню JQuery, jquery меню для сайта

Когда пользователь нажимает на изображение стрелки еще раз, все происходит с точностью до наоборот, иконки скрываются и меню вращается в направлении снизу вверх.

горизонтальное меню jquery

Техника

Технику, которую мы будем использовать, мы уже использовали в предыдущем уроке. Для 3D вращающегося куба, мы будем использовать технику из статьи “3D форма поиска для сайта на JQuery и CSS3!”. Если вы пропустили этот урок, пожалуйста, прочитайте его прежде чем продолжить чтение этого урока.

Разметка HTML и стилизация СSS

Меню и значки обернуты в DIV, с названием dock-wrapper, он будет иметь 3D перспективы и позицию закрепления. Горизонтальное меню будет состоять из двух тегов DIV, с именами dock-front и dock-top, и оба они будут работать как куб. Последним элементом DIV является item, он завершает все значки. В этой статье используются иконки из некоторых приложений, доступных на Google Play.

Первое, что мы сделаем, это установим ​​перспективу для dock-wrapper и установим позиционирование в нижней части страницы. Установим для dock-front и dock-top, преобразования и фон. Мы также добавим немного анимации при наведении пользователя на стрелку открытия меню. И наконец, мы готовим класс dock-show, который будет выводиться в dock, с использованием JavaScript, чтобы создать анимацию.

Закончив стилизацию jquery меню, мы добавим стили для значков. Первоначально иконки будут скрыты за меню и каждый значок будет иметь абсолютное позиционирование (position:absolute), чтобы легче было ими манипулировать и располагать.

Конечный результат на данный момент:

jquery меню в стиле Android

Эффекты JavaScript

Когда пользователь нажимает на стрелку, мы будет вводить dock-show для dock, чтобы сделать анимацию. После этого мы будем последовательно выводить каждый значок на свою позицию, делая его видимым для пользователя.

Когда пользователь нажал ещё раз на стрелку, мы будем делать обратное, то есть следующее:

Последний шаг, это добавить эффект анимации для значка, когда пользователь наводит на него указателем мыши.

Заключение

Теперь наше горизонтальное меню jquery готово! Надеюсь Вам понравилось. Вопросы или пожелания, пожалуйста, пишите в комментариях. Спасибо! :)


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


ВСЕ КОММЕНТАРИИ

    1. Такой вопрос:
      как сделать эти изображения ссылками? стандартным методом не выходит!

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Здравствуйте!
        Изображения оберните обычным способом, ссылками a:

        Далее в стилях со 144 по 170 строки замените .item img на .item a
        И файл demo.js строка 47 думаю стоит подкорректировать немного верхний отступ, сделать -9em

        Ну как), а теперь получилось?)

    1. Да, всё работает, огромное спасибо!
      пришел за ответом именно на этот вопрос, но понравились ещё кое-какие материальчики, потом приду, посмотрю)

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