Все для веб-дизайнера
Меню для сайта с эффектом развертывания
Наш сайт уделяет внимание множеству уроков по созданию навигации для сайта. Каждый сайт должен быть уникальным в своем роде. Это позволяет визуально запомнить ресурс, а если в нем есть какая-то изюминка, то сайт просто обречен на успех, конечно не стоит забывать об уникальности материала на сайте. В данном уроке мы решили рассмотреть еще одно, весьма интересное меню для сайта с эффектом развертывания. Ключевая особенность данной навигации состоит в том, что она сделана с помощью трансформаций css.
Следует обратить внимание, что меню будет работать только в браузерах webkit. Во всех остальных не будет достигнут эффект в полной мере. И так, приступим.
Шаг 1. HTML
Для начала нам необходимо создать простую разметку, для этого мы используем список, с надлежащими ему тегами.
|
1 2 3 4 5 6 7 8 9 10 11 |
<dl class="list nigiri"> <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> <dd><a href="#">Иконки</a></dd> </dl> |
С этим все достаточно просто, перейдем к следующему шагу.
Шаг 2. CSS
Нам необходимо создать трансформации, для эффектного отображения, с помощью свойства rotateY мы устанавливаем полувращения по оси Y. Свойство perspective применяется при трансформациях элемента, определяет расстояние в пикселях от плоскости дочерних элементов до точки из которой пользователь как бы смотрит на них.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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 придает глубину изображению, в результате чего элементы, находящиеся для зрителя дальше будут казаться меньше, а находящиеся ближе — больше.
Шаг 3. JavaScript
Мы рассмотрим некоторые параметры, которые необходимы для демонстрации и не только.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
// Включает сообщение о поддержке CSS 3D if ( $.fn.makisu.enabled ) { var $sashimi = $( '.sashimi' ); var $nigiri = $( '.nigiri' ); var $maki = $( '.maki' ); // Создаем меню $nigiri.makisu({ selector: 'dd', overlap: 0.85, speed: 1.7 }); $maki.makisu({ selector: 'dd', overlap: 0.6, speed: 0.85 }); $sashimi.makisu({ selector: 'dd', overlap: 0.2, speed: 0.5 }); // Открыть все $( '.list' ).makisu( 'open' ); // Закрыть все по клику $( '.toggle' ).on( 'click', function() { $( '.list' ).makisu( 'toggle' ); }); // Запрещаем ссылки $( '.demo a' ).click( function( event ) { event.preventDefault(); }); } else { $( '.warning' ).show(); } |
Вот и все. Готово!
| Опубликовал Cooper 12.12.2012 в 20:12, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
