Меню в стиле рок-н-ролл на jQuery

В этом руководстве мы рассмотрим, как можно сделать меню в стиле рок-н-ролл с помощью jQuery. Мы будем использовать сторонний патч на вращение и масштабирование, который можно скачать здесь.

Мы создадим меню с маленькими иконками, которые будут крутится при наведении на них курсором мыши. Также сделаем автораскрытие контента из элемента меню, например поисковой формы.
Давайте посмотрим, что получится...

Разметка

Для этого меню мы не будем создавать список, так будем использовать элементы div для каждого элемента меню. Мы расположим элементы меню так, что главный div наименовался, как menu. У каждого элемента будет иконка, как ссылка, и контент div с заголовком и параграфом, где мы и разместим поисковую форму:

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

CSS

Общий стиль меню определяется следующим образом:

Элементы внутри меню будут прижиматься вправо, потому как, мы хотим, чтобы они раскрывали контент влево:

Затем определим стили иконок (класс ссылки) следующим способом:

Другие элементы контента будут определены так:

С помощью белой тени от текста, мы получим эффект гравировки.

Теперь добавим немного магии.

JavaScript

Во-первых, нам нужен jQuery и два скрипта-патча от Zachary.
Затем, добавляем следующие функции:

Чтобы все было проще, мы создали две функции. Одна отвечает за разворот элемента, вторая — за его сворачивание. Функция разворота поворачивает иконку вокруг себя 4 раза (360 градусов умножить на 4, будет 1440 градусов). Мы также добавили анимацию разворачивания, с помощью плавного увеличения ширины элемента. Затем, появление контента.

Функция сворачивания поворачивает иконку в обратную сторону, уменьшая ширину элемента и пряча контент.

Вам понравилась статья? Напишите, чтобы вы хотели добавить или изменить...


4 комментарий на “Меню в стиле рок-н-ролл на jQuery

  1. Здравствуйте, крутое меню! Мне очень понравилось! Только, как его можно установить на тему wordpress вместо основного меню?

    Thumb up 0 Thumb down 0

    • Если только написать для этого плагин для wordpress или попытаться самому встроить это меню в вашу тему.

      Thumb up 0 Thumb down 0

      • Написать плагин еще трудней будет (для меня), чем вставить этот код в header.php и в style.css. Пробовал самостоятельно прописать в несложной теме, ничего не получилось... Если кому под силу это сделать (вставить это меню в тему wordpress) то сделайте это, думаю не я один буду благодарен, а еще лучше, если это было снято на видео :)

        Thumb up 0 Thumb down 0

Оставить комментарий