Вы, наверняка, не раз задумывались, как можно создать нечто оригинально, то есть такое, что будет отличатся от других сайтов, и не будет повторяться. С каждым часом это становится сделать все труднее и труднее, ведь посетители становятся более требовательными, обращают внимание на мелочи. Но что если вы хотите креативно подойти к поставленной задаче, и создать, к примеру, меню для сайта не обычной горизонтальной или вертикальной формы, а круглой, да да, вы все правильно прочитали. В данном уроке мы рассмотрим процесс создания такого меню.

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

Шаг 1. HTML

По обычаю начнем с разметки. Мы будем использовать чеки и ратио-кнопки, которые с помощью css, будут реагировать на вращение. Получаем такую разметку.

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

Шаг 2. СSS

Нам необходимо, чтобы кнопки реагировали на нажатия, и были рабочими при этом, для этого мы будем использовать псевдо-класс :checked. Также будут применяться 3D трансформации, чтобы кнопка переворачивалась при включении.

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

Теперь реализуем контейнер для меню который растягивается из-за кнопки, когда кнопка нажата. Элемент div в сочетании с 3D-трансформацией работает только в Chrome, поэтому эффект реализуется старым трюком с рамкой.

Теперь нам необходимо определить стили для наших информационных блоков и меток.

Теперь нам необходимо определить, становится ли меню правильно при нажатии и возврате назад. Снова используется селектор родственников и псевдо-класс :checked.

Вот и все. Готово!

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