WebDesignMagazine.ru – Журнал о веб-дизайне

Создание интерактивного вращающегося меню при помощи CSS3

1

В этом уроке мы будем создавать анимированное вращающееся меню, которое включает в себя набор различных методов CSS3.
В этом меню используется очень много CSS3 но, на удивление, это меню очень хорошо работает во многих браузерах. Основная проблема связана с Оперой, которая сталкивается с несколькими проблемами при попытке запустить код (в связи с отсутствием поддержки преобразования).

Демо Скачать урок

 

Только чистый CSS

Для достижения желаемого эффекта, мы должны использовать несколько CSS трюков. Во-первых, нам нужно создать HTML. Мы поставим туда несколько флажков и радио кнопок, которые (позже) будем использовать в тандеме с CSS, чтобы проверить, если пользователь нажал на них. Затем у нас могут быть label`ы где угодно в коде, которые будет связываться с соответствующими радио кнопками, и использовать эти лейблы как блочные элементы для нормального дизайна. Потом, для того чтобы изменить CSS других элементов щелчком мыши, можно просто использовать .checkbox:checked.

Для этого конкретного меню и простоты, мы будем использовать простые символы ASCII, но вы можете использовать набор иконок или любые другие CSS-иконки. Если вы не можете их получить, тогда просто используйте изображения/картики вместо иконок.

HTML для меню:

Теперь создайте CSS файл и слинкуйтесь с ним в хэдере (head) вашего HTML документа.

CSS

Чтобы сделать меню интерактивным, мы объединим две основные функции CSS: селекторы-родственники и :checked псевдо-класс. Мы также включим 3D преобразование, чтобы ON/OFF кнопка перевернулась, когда будет включена. Начальное стилирование только меняет внешний вид меню:

Далее нам нужно проверить, если флажок ON отмечен. Затем мы используем родственный селектор, чтобы показать DIV, который  мы хотим стилировать и изменить соответствующим образом.

Следующий шаг, это изменить сам контейнер меню.

Теперь мы переходим к стилированию информационных боксов и labels, чтобы убедиться, что всё находится в правильном положении.

И, наконец, нам нужно вращать иконки в нужном направлении, и убедиться в том, что они повернуты в том заданом положении, при нажатие. Опять же, мы используем родственные селекторы и :checked псевдо-класс.

Вот и всё. Не забудьте просмотреть демо и скачать необходимые файлы!

 

Поделиться:
  • Дима Зуенко

    “Убойная Графика”Воспользуйтесь этим предложением и получите потрясающий комплект графики для вашего инфобизнеса прямо сейчас!!!
    http://ecommtools.com/buy/dimazuenko/1

    Рейтинг: 0