Все для веб-дизайнера
Создаем 3d меню для сайта с помощью CSS3
На нашем небольшом блоге большая часть постов уделяется именно созданию меню сайта, это не удивительно, если считать, что организация на сайте крайне важна, ведь посетителю необходимо быстро, и без всяких лишних движений, найти необходимую информацию. Кроме этого данное меню должно находиться на виду, но как каждый раз удивить посетителя, в сегодняшнем уроке мы рассмотрим как создать замечательное, объемное меню для сайта с использованием только трансформаций css3. Вот что у нас с этого получилось..
Следует заметить, что меню будет работать только в браузерах поддерживающих 3D трансформации. Для этого нам нужна разметка содержащая якоря в котором будут содержатся четыре элемента. Каждый элемент будет представлять сторону параллелепипеда. Это нам необходимо для фронтального обзора навигации.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
</pre> <ul class="menu"> <li class="home current"><a href="#"> <span>Главная</span> <span>Главная</span> <span>Главная</span> <span>Главная</span> </a> <ul> <li><a>Подпункт</a></li> <li><a>Подпункт</a></li> </ul> </li> <li class="about"><a href="#"> <span>О нас</span> <span>О нас</span> <span>О нас</span> <span>О нас</span> </a></li> <li><a>Реклама</a></li> <li><a>Соглашение</a></li> </ul> <pre> |
Мы будем использовать Symbolset, для получения необходимых значков. Если вы не используете symbolset то просто удалите <i> теги.
Шаг 2. СSS
3D преобразования доступны полностью только для браузеров WebKit, которых, согласно статистике StatCounter составляют около 39% рынка. Firefox поддерживает 3D преобразования, но реализация немного отличается, и поэтому на самом деле не выглядит так же хорошо, как в браузерах WebKit. Для решения этой трансформации мы будем использовать 4 грани. Для начала рассмотрим основные параметры и правила.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.menu { -webkit-perspective: 100000; -moz-perspective: 100000; -o-perspective: 100000; -ms-perspective: 100000; perspective: 1200; display: block; width: 800px; height: 65px; margin: 0 auto; list-style: none; padding: 0; padding: 0 0 0 30px; border-radius: 5px; background-color: #546065; } |
Далее нам необходимо установить слоя и правильные переходы для трансформации, которые будут реагировать на курсор мыши.
|
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 |
.menu li { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; height: 21px; width: 140px; margin: 0 10px 0 0; float: left; position: relative; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .menu li a { display: block; color: #fff; font-weight: bold; box-sizing: border-box; height: inherit; width: inherit; font-size: 1.2em; text-decoration: none; text-transform: uppercase; font-family: Arial, sans-serif; } .menu li a span { height: inherit; width: inherit; padding: 22px 0; text-align: center; position: absolute; left: 0; display: block; } |
При вращении граней параллелепипеда меню нам необходимо их выделить с помощью свечения плоскостей, для этого мы зададим правильные оттенки.
|
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 |
.menu li a span:first-of-type { -webkit-transform: translateZ(74px); -moz-transform: translateZ(74px); -o-transform: translateZ(74px); -ms-transform: translateZ(74px); transform: translateZ(74px); background-color: #3e4649; box-shadow: inset 0px 0px 15px rgba(0,0,0,0.1); } .menu li a span:nth-of-type(2) { background: #fa623f; box-shadow: inset 0px 35px 30px -30px rgba(255,255,255,0.1); -webkit-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px); -moz-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px); -o-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px); -ms-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px); transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px); } .menu li a span:nth-of-type(3) { background: #f8876d; box-shadow: inset 0px 35px 30px -30px rgba(255,255,255,0.1); -webkit-transform: rotate3d(1,0,0,180deg) translateZ(-9px); -moz-transform: rotate3d(1,0,0,180deg) translateZ(-9px); -o-transform: rotate3d(1,0,0,180deg) translateZ(-9px); -ms-transform: rotate3d(1,0,0,180deg) translateZ(-9px); transform: rotate3d(1,0,0,180deg) translateZ(-9px); } .menu li a span:nth-of-type(4) { background: #3e4649; -webkit-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px); -moz-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px); -o-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px); -ms-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px); transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px); } .current { -webkit-transform: rotate3d(1,0,0,-90deg) translateZ(-20px); -moz-transform: rotate3d(1,0,0,-90deg) translateZ(-20px); -o-transform: rotate3d(1,0,0,-90deg) translateZ(-20px); -ms-transform: rotate3d(1,0,0,-90deg) translateZ(-20px); transform: rotate3d(1,0,0,-90deg) translateZ(-20px); } |
Далее формируем правильное возвращение граней при наведении курсора мыши, которое будет трансформировать объемное меню в обычное.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.menu > li:hover { -webkit-transform: rotate3d(1,0,0,-90deg) translateZ(-20px); -moz-transform: rotate3d(1,0,0,-90deg) translateZ(-20px); -o-transform: rotate3d(1,0,0,-90deg) translateZ(-20px); -ms-transform: rotate3d(1,0,0,-90deg) translateZ(-20px); transform: rotate3d(1,0,0,-90deg) translateZ(-20px); } .menu > .current:hover { -webkit-transform: rotate3d(1,0,0,-180deg) translateY(-44px); -moz-transform: rotate3d(1,0,0,90deg) translateZ(-64px); -o-transform: rotate3d(1,0,0,-180deg) translateY(-44px); -ms-transform: rotate3d(1,0,0,-180deg) translateY(-44px); transform: rotate3d(1,0,0,-180deg) translateY(-44px); } /* This is for browsers without 3D support. They will just see a normal menu */ .menu > .current span:nth-of-type(4), .menu > li:hover span:nth-of-type(4) { background: #fa623f; } .menu > .current:hover span:nth-of-type(4) { background: #f8876d; } |
Последним шагом будет создания выпадающих подпунктов для меню, они являются не обязательными, и вы их с легкостью можете удалить, мы установили анимацию вращения 0,3 секунды, и выпадение подпунктов.
|
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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.menu ul { opacity: 0; width: 100%; border-radius: 0; padding: 0; } .menu > li:hover ul { opacity: 1; height: auto; background: #fa623f; -webkit-transition: opacity 0.1s linear 0.3s; -moz-transition: opacity 0.1s linear 0.3s; -o-transition: opacity 0.1s linear 0.3s; -ms-transition: opacity 0.1s linear 0.3s; transition: opacity 0.1s linear 0.3s; -webkit-transform: rotate3d(1,0,0, 90deg) translateY(114px); -moz-transform: rotate3d(1,0,0, 90deg) translateY(115px); -o-transform: rotate3d(1,0,0, 90deg) translateY(114px); -ms-transform: rotate3d(1,0,0, 90deg) translateY(114px); transform: rotate3d(1,0,0, 90deg) translateY(114px); position: absolute; left: 0; top: 65px; } .menu > li ul { -webkit-transform: rotate3d(1,0,0, 90deg); -moz-transform: rotate3d(1,0,0, 90deg); -o-transform: rotate3d(1,0,0, 90deg); -ms-transform: rotate3d(1,0,0, 90deg); transform: rotate3d(1,0,0, 90deg); } .menu > .current:hover ul { -webkit-transform: rotate3d(1,0,0, 180deg) translateY(145px); -moz-transform: rotate3d(1,0,0, 270deg) translateY(31px); -o-transform: rotate3d(1,0,0, 180deg) translateY(141px); -ms-transform: rotate3d(1,0,0, 180deg) translateY(161px); transform: rotate3d(1,0,0, 180deg) translateY(161px); top: 65px; background: #f8876d; } .menu ul li { display: block; float: none; border-radius: 0; background: inherit; width: 170px; height: 40px; } .menu ul li a { box-sizing: border-box; padding: 8px 0 0 25px; background: inherit; width: inherit; } .menu ul li a:hover { background-color: #eb350b; } .menu ul .current a:hover { background-color: #ce5f45; } .menu .contact { width: 170px; } |
Работу меню можно проверить в демонстрации, не стоит забывать, что правильно работать будет только в браузерах Webkit.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 20.11.2012 в 03:17, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
