Круглое вращающееся меню на JQuery, зеленый стиль! | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryКруглое вращающееся меню на JQuery, зеленый стиль!
Дата: 08.06.2013 в 00:11 | Просмотров: 6901

Круглое вращающееся меню на JQuery, зеленый стиль!

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

В этом уроке мы создадим невероятно красивое вращающееся меню на основе JQuery скрипта от Zachary Johnson, который может быть найден здесь.

Мы создадим горизонтальное меню jquery с маленькими иконками, которые будут вращаться при наведении курсора. Кроме того, каждый пункт меню будет выдвигаться и показывать другие подпункты, вроде ссылок, формы поиска или даже можно вставить картинку, при желании (в общем, что угодно). Ещё советую посмотреть на другое, выдвигающееся меню навигации на JQuery – возможно, оно Вам понравиться больше.

Итак, давайте начнем, и Вы поймете, что на самом деле это не так сложно как кажется.

HTML код

Для этого меню мы не будем создавать маркированный список ul, но сделаем все на основе тегов div. Все меню будет обернуто в div с классом menu.

Каждый пункт меню будет иметь иконку, как элемент ссылки, а также весь контент с классом item_content, включающий в себя заголовок и все подпункты, или форма поиска:

Изначально div с классом item, будет таких же размеров, как и иконка, но при наведении расширится, и мы увидим его содержимое.

CSS стилизация

Общий стили для всего меню:

все элементы внутри item будут позиционированы float:right;, так как мы будем расширять пункты меню слева:

Далее мы определяем стили иконок (зададим класс для каждой ссылки) следующим образом:

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

С параметрами text-shadow, мы создали хороший эффект выгравированного текста. Ладно, все это хорошо, но ведь без Javascript это никуда не годится! Идем далее… :)

Javascript скрипт

Сначала нам нужно подключить скрипты JQuery от Zachary Johnson, а затем добавим следующие функции:

Чтобы облегчить задачу, мы создали две функции:

  • функция расширения expand – будет вращать значок вокруг себя 4 раза (360 х 4 = 1440). Мы также расширим пункт меню с помощью анимации увеличения его ширины. Затем мы показываем его содержимое.
  • функция закрытия collapse – будет вращать значок назад, в первоначальное положение, уменьшает ширину и скрывает содержимое пункта меню.

И вот все готово! Я надеюсь, что вам понравилось! Жду Ваших комментариев! ;)


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


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

    1. Здравствуйте. Всё делал по описанию, но меню не работает. Вот сайт http://test-mw.ucoz.ru/

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

        Здравствуйте! Похоже, что Вы не подключили Javascript скрипты. Проверьте, пожалуйста, подключена ли к Вашему сайта библиотека JQuery, а также 2 файла js. Если все таки не получится, пишите я помогу.

    1. JQuery у меня 1.7.2.
      и js два файла тоже есть в папке js. :sad:

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

        Кроме подключения файлов js, Вам необходимо также прописать javascript функции, которые приведены в конце статьи. Конкретно посмотреть на Ваш сайт не смог, так как он не работает.

        Будут вопросы – пишите.

    1. Александр:
      http://vashgruz.by/

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

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

        Александр, в вашем случае эффект не работает должным образом по двум причинам:
        1. Нет стандартного сброса стилей *{margin: 0; padding: 0;}. При этом если сейчас его сделать, придётся поправлять и другие элементы сайта.
        2. Не применены все необходимые свойства для .item_content p
        Решение:
        Добавить к .item_content p это:
        background-color: transparent;
        float: left;
        margin-right: 7px;
        margin-top: 1px;
        color: #bbb;
        text-shadow: 1px 1px 1px #fff;
        text-decoration: none;
        font-size: 12px;

        + для .item_content h2 дописать:
        margin: 0;

        И будет вам счастье:)

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