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

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

Мы будем использовать Symbolset, для получения необходимых значков. Если вы не используете symbolset то просто удалите <i> теги.

Шаг 2. СSS

3D преобразования доступны полностью только для браузеров WebKit, которых, согласно статистике  StatCounter составляют около 39% рынка. Firefox поддерживает 3D преобразования, но реализация немного отличается, и поэтому на самом деле не выглядит так же хорошо, как в браузерах WebKit. Для решения этой трансформации мы будем использовать 4 грани. Для начала рассмотрим основные параметры и правила.

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

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

Далее формируем правильное возвращение граней при наведении курсора мыши, которое будет трансформировать объемное меню в обычное.

Последним шагом будет создания выпадающих подпунктов для меню, они являются не обязательными, и вы их с легкостью можете удалить, мы установили анимацию вращения 0,3 секунды, и выпадение подпунктов.

Работу меню можно проверить в демонстрации, не стоит забывать, что правильно работать будет только в браузерах Webkit.

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

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