В данном уроке мы создадим анимированное 3D навигационное меню (с иконками) с использованием только CSS3 (без JavaScript). Задействуем мощные эффекты CSS3, такие как перспектива, трансформации, градиенты и переходы. Чтобы увидеть меню в действии нужно поместить курсор мыши на голубой элемент вверху страницы.
Разметка HTML
Сначала определим структуру HTML.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>3D меню, сдвигающееся сверху | Матреиалы сайта RUSELLER.COM</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body class="menu_body">
<!-- Элемент основного меню -->
<div class="menu">
<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 class="page_content">
<div class="shade"></div>
<div class="box">
<div class="header">Заголовок</div>
<div class="body">
...
</div>
<div class="footer">Нижний колонтитул</div>
</div>
<div class="box">
<div class="header">Заголовок</div>
<div class="body">
...
</div>
<div class="footer">Нижний колонтитул</div>
</div>
</div>
</body>
</html>
В теле документа у нас имеются два элемента: menu и page_content. Основная идея заключается в разделении страницы на две секции. Главное меню состоит из элементов неупорядоченного списка. Каждый элемент имеет свое изображение.
Страница также содержит теневой элемент (который не видим по умолчанию) и остальной код (в демонстрации используются два прямоугольника с заголовком, текстом и нижним колонтитулом).
CSS
Меню работает почти во всех современных браузерах (кроме IE). Лучший результат получается в Firefox и Chrome.
Сначала определим правила для элемента body:
.menu_body {
/* Перспектива */
-webkit-perspective: 1500px;
-moz-perspective: 1500px;
-ms-perspective: 1500px;
-o-perspective: 1500px;
perspective: 1500px;
}
Он добавил перспективу на нашу страницу. Теперь нужно написать базовые правила для меню и содержания:
.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 для скрытия/ вывода основного меню. Теперь добавим правила для неупорядоченнного списка с изображениями:
/* Основное меню - свойства 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;
}
Используем переход для наших изображений - будет меняться цвет и радиус. Когда курсор мыши находится в меню, страница будет становиться немного темнее (будем использовать затеняющий элемент с градиентом):
/* Затеняющий элемент страницы (невидим по умолчанию) */
.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 при наведении курсора мыши на меню:
/* Когда курсор мыши находится над меню, поворачиваем 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;
}