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

Данное 3D навигационное меню будет создано с использованием только CSS3. Чтобы увидеть меню в действии нужно поместить курсор мыши на голубой элемент вверху страницы. И так, приступим.

Шаг 1. HTML

Для начала мы рассмотрим разметку,

В содержании документа у нас имеются два элемента: menu и page_content. Основная идея заключается в разделении страницы на две секции. Главное меню состоит из элементов неупорядоченного списка. Каждый элемент имеет свое изображение.

Шаг 2. CSS

Меню будет работать почти во всех современных браузерах (кроме  IE). Лучший результат получается в Firefox и Chrome.

Для начала мы определим правила для элемента body:

Он добавил перспективу на нашу страницу. Теперь нужно написать базовые правила для меню и содержания:

Обратите внимание, что мы используем свойства rotateX и translateY для скрытия/ вывода основного меню. Теперь добавим правила для неупорядоченнного списка с изображениями:

Когда курсор мыши находится в меню, страница будет становиться немного темнее  (будем использовать затеняющий элемент с градиентом):

В завершение нужно вывести затеняющий элемент и повернуть page_content при наведении курсора мыши на меню:

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

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