Создаем 3D меню для сайта с помощью CSS3 | RUDEBOXВ данном уроке мы рассмотрим как создать весьма привлекательно объемное меню для сайта, идея состоит в том, что меню будет наклонено под углом в сорок пять градусов, при этом некоторые пункты будут содержать подпункты, которые буду плавно выпадать при наведении, такой эффект обрамлен тенями, что выделяет пункты еще сильнее и увеличивает эффект, такое меню можно прикрутить к сайту портфолио или персональному блогу. Меню легко кастомизировать присваивая ему градиенты. И так, давайте посмотрим, что у нас получилось.

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

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

Шаг 1. HTML

У нас есть контейнер, в котором организованы пункты и подпункты:

В разметке нет ничего сложного, не будем останавливаться и перейдем дальше.

Создаем 3D меню для сайта с помощью CSS3 | RUDEBOX

Шаг 2. CSS

Главной задачей нам необходимо установить угол наклона, для каждого элемента она будет своя, в градусах, мы будем использовать три оси координат:

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

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