Главная страница » CSS » Меню для сайта с эффектом развертывания

Меню для сайта с эффектом развертывания

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

<dt>Навигация</dt>

<dd><a href="#">Главная</a></dd>

<dd><a href="#">Уроки</a></dd>

<dd><a href="#">Исходники</a></dd>

<dd><a href="#">Скачать</a></dd>

<dd><a href="#">Шаблоны</a></dd>

<dd><a href="#">Кисти</a></dd>

<dd><a href="#">Иконки</a></dd>

</dl>

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

Меню для сайта с эффектом развертывания с помощью CSS3 | RUDEBOX

Шаг 2. CSS

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

.nigiri {

-webkit-transform: perspective(1200px) rotateY(40deg) !important;

-moz-transform: perspective(1200px) rotateY(40deg) !important;

-ms-transform: perspective(1200px) rotateY(40deg) !important;

-o-transform: perspective(1200px) rotateY(40deg) !important;

transform: perspective(1200px) rotateY(40deg) !important;

-webkit-transform-origin: 110% 25%;

-moz-transform-origin: 110% 25%;

-ms-transform-origin: 110% 25%;

-o-transform-origin: 110% 25%;

transform-origin: 110% 25%;

left: 20%;

}

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