Все для веб-дизайнера
Выпадающее меню с 3d-эффектом на CSS3
Красивое оформление сайта позволит не только привлечь внимание посетителей к оригинальному подходу и дизайнерскому решению, но и завоюет сердца постоянных читателей. Но не все мастера знают как правильно преподать свое творение читателей, и мало того, добавить к сайту какую то особенную изюминку. В данном уроке мы рассмотрим как создать простое, на первый взгляд, выпадающее меню с эффектами трансформаций для контента содержащего на странице, это визуально подчеркнет меню, ведь все внимание будет привлечено именно к выдающей навигации.
Данное 3D навигационное меню будет создано с использованием только CSS3. Чтобы увидеть меню в действии нужно поместить курсор мыши на голубой элемент вверху страницы. И так, приступим.
Шаг 1. HTML
Для начала мы рассмотрим разметку,
|
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 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Выпадающее меню с 3d-эффектом с помощью CSS3 | Демонстрация для сайта RUDEBOX</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <link href="css/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- Элемент основного меню --> <div> <ul> <li><a href="#"><img src="images/1.png" /></a></li> <li><a href="#"><img src="images/2.png" /></a></li> <li><a href="#"><img src="images/3.png" /></a></li> <li><a href="#"><img src="images/4.png" /></a></li> <li><a href="#"><img src="images/5.png" /></a></li> <li><a href="#"><img src="images/6.png" /></a></li> <li><a href="#"><img src="images/7.png" /></a></li> </ul> </div> <div> <div></div> <div> <div>Заголовок</div> <div> ... </div> <div>Нижний колонтитул</div> </div> <div> <div>Заголовок</div> <div> ... </div> <div>Нижний колонтитул</div> </div> </div> </body> </html> |
В содержании документа у нас имеются два элемента: menu и page_content. Основная идея заключается в разделении страницы на две секции. Главное меню состоит из элементов неупорядоченного списка. Каждый элемент имеет свое изображение.
Шаг 2. CSS
Меню будет работать почти во всех современных браузерах (кроме IE). Лучший результат получается в Firefox и Chrome.
Для начала мы определим правила для элемента body:
|
1 2 3 4 5 6 7 8 |
.menu_body { /* Перспектива */ -webkit-perspective: 1500px; -moz-perspective: 1500px; -ms-perspective: 1500px; -o-perspective: 1500px; perspective: 1500px; } |
Он добавил перспективу на нашу страницу. Теперь нужно написать базовые правила для меню и содержания:
|
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 |
.menu, .page_content { /* Схема вывода, трансформация и переход */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: -webkit-transform 0.5s ease; -moz-transition: -moz-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; -o-transition: -o-transform 0.5s ease; transition: transform 0.5s ease; } /* Элемент основного меню (которое появляется сверху) */ .menu { background-color: #002edb; display: block; position: fixed; width: 100%; height: 148px; z-index: 1; /* Трансформация */ -webkit-transform: rotateX(-45deg) translateY(-95%); -moz-transform: rotateX(-45deg) translateY(-95%); -ms-transform: rotateX(-45deg) translateY(-95%); -o-transform: rotateX(-45deg) translateY(-95%); transform: rotateX(-45deg) translateY(-95%); } /* Изменяем цвет фона и вращаем элемент основного меню при наведении курсора мыши */ .menu:hover { background-color: #4169ff; /* CSS3 transform */ -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } /* Остальное содержание страницы */ .page_content { padding: 20px 0 0; } |
Обратите внимание, что мы используем свойства rotateX и translateY для скрытия/ вывода основного меню. Теперь добавим правила для неупорядоченнного списка с изображениями:
|
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 |
/* Основное меню - свойства UL-LI */ .menu ul { display: block; margin: 0 auto; overflow: hidden; position: relative; width: 1036px; } .menu ul li { float: left; list-style: none outside none; margin: 10px; /* Переход */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menu ul li:hover { background-color: #7e00d6; /* Скругление углов */ -webkit-border-radius: 64px; -moz-border-radius: 64px; -ms-border-radius: 64px; -o-border-radius: 64px; border-radius: 64px; } |
Когда курсор мыши находится в меню, страница будет становиться немного темнее (будем использовать затеняющий элемент с градиентом):
|
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 |
/* Затеняющий элемент страницы (невидим по умолчанию) */ .page_content .shade { display: block; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; visibility: hidden; width: 100%; z-index: 1000; /* Линейный градиент */ background: -moz-linear-gradient(top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%); background: -webkit-gradient(linear, top top, bottom top, color-stop(0%,rgba(0,0,0,0.15)), color-stop(100%,rgba(0,0,0,0.65))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.65) 100%); /* Трансформация */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } |
В завершение нужно вывести затеняющий элемент и повернуть page_content при наведении курсора мыши на меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Когда курсор мыши находится над меню, поворачиваем page_content вниз */ .menu:hover ~ .page_content { /* CSS3 transform */ -webkit-transform: rotateX(-45deg) translateY(80px); -moz-transform: rotateX(-45deg) translateY(80px); -ms-transform: rotateX(-45deg) translateY(80px); -o-transform: rotateX(-45deg) translateY(80px); transform: rotateX(-45deg) translateY(80px); } /* Когда курсор мыши находится над меню, выводим тень */ .menu:hover ~ .page_content .shade { opacity: 1; visibility: visible; } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 27.08.2012 в 11:30, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
