Иногда вы просто хотите, чтобы на вашем сайте была оригинальная навигация и я предлагаю вашему вниманию интересное решение адаптивного 3D меню для сайта.
ДЕМО
ИСХОДНИКИ
Создание структуры
Создан тег <header> элемент, чтобы обернуть логотип и триггер для вращающихся навигации .cd-3d-nav-trigger и <main> элемент, чтобы обернуть основное содержание. Мы используем неупорядоченный список для навигации, семантически, завернутый в тег <NAV> элемент. Промежуток span.cd-marker добавляется в тег <NAV>, чтобы Создать маркер для выбранного элемента в навигации.
HTML
Между тегами <head> </head> подключаем стили и скрипты:
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->Устанавливаем вывод навигации:
<nav class="cd-3d-nav-container">
<ul class="cd-3d-nav">
<li class="cd-selected">
<a href="#0">Dashboard</a>
</li>
<li>
<a href="#0">Projects</a>
</li>
<li>
<a href="#0">Images</a>
</li>
<li>
<a href="#0">Settings</a>
</li>
<li>
<a href="#0">New</a>
</li>
</ul> <!-- .cd-3d-nav -->
<span class="cd-marker color-1"></span>
</nav> <!-- .cd-3d-nav-container -->
CSS
Для получения нашей анимации, используются CSS3-преобразования, примененного к<header>, <main> и <navigation> элементы.
Вот краткий обзор, чтобы показать вам процесс анимации:
Собственно сами стили:
/* --------------------------------
Primary style
-------------------------------- */
*, *::after, *::before {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: "Open Sans", sans-serif;
background-color: #485274;
}
a {
text-decoration: none;
}
/* --------------------------------
Main Components
-------------------------------- */
.cd-header {
height: 80px;
width: 90%;
margin: 0 auto;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-header::after {
clear: both;
content: "";
display: table;
}
.cd-header.nav-is-visible {
-webkit-transform: translateY(80px);
-moz-transform: translateY(80px);
-ms-transform: translateY(80px);
-o-transform: translateY(80px);
transform: translateY(80px);
}
@media only screen and (min-width: 768px) {
.cd-header.nav-is-visible {
-webkit-transform: translateY(170px);
-moz-transform: translateY(170px);
-ms-transform: translateY(170px);
-o-transform: translateY(170px);
transform: translateY(170px);
}
}
.cd-logo {
float: left;
margin-top: 28px;
}
.cd-3d-nav-trigger {
position: relative;
float: right;
height: 45px;
width: 45px;
margin-top: 18px;
/* replace text with background image */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
color: transparent;
}
.cd-3d-nav-trigger span,
.cd-3d-nav-trigger span::before,
.cd-3d-nav-trigger span::after {
/* hamburger icon in CSS */
position: absolute;
width: 28px;
height: 3px;
background-color: #FFF;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-3d-nav-trigger span {
/* this is the central line */
top: 21px;
left: 8px;
-webkit-transition: background 0.2s 0.5s;
-moz-transition: background 0.2s 0.5s;
transition: background 0.2s 0.5s;
}
.cd-3d-nav-trigger span::before, .cd-3d-nav-trigger span:after {
/* these are the upper and lower lines */
content: '';
left: 0;
-webkit-transition: -webkit-transform 0.2s 0.5s;
-moz-transition: -moz-transform 0.2s 0.5s;
transition: transform 0.2s 0.5s;
}
.cd-3d-nav-trigger span::before {
bottom: 8px;
}
.cd-3d-nav-trigger span::after {
top: 8px;
}
.nav-is-visible .cd-3d-nav-trigger span {
/* hide line in the center */
background-color: rgba(255, 255, 255, 0);
}
.nav-is-visible .cd-3d-nav-trigger span::before, .nav-is-visible .cd-3d-nav-trigger span::after {
/* keep visible other 2 lines */
background-color: white;
}
.nav-is-visible .cd-3d-nav-trigger span::before {
-webkit-transform: translateY(8px) rotate(-45deg);
-moz-transform: translateY(8px) rotate(-45deg);
-ms-transform: translateY(8px) rotate(-45deg);
-o-transform: translateY(8px) rotate(-45deg);
transform: translateY(8px) rotate(-45deg);
}
.nav-is-visible .cd-3d-nav-trigger span::after {
-webkit-transform: translateY(-8px) rotate(45deg);
-moz-transform: translateY(-8px) rotate(45deg);
-ms-transform: translateY(-8px) rotate(45deg);
-o-transform: translateY(-8px) rotate(45deg);
transform: translateY(-8px) rotate(45deg);
}
.cd-3d-nav-container {
/* this is the 3D navigation container */
position: fixed;
top: 0;
left: 0;
height: 80px;
width: 100%;
background-color: #000000;
visibility: hidden;
/* enable a 3D-space for children elements */
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
-moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
transition: transform 0.5s 0s, visibility 0s 0.5s;
}
.cd-3d-nav-container.nav-is-visible {
visibility: visible;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.5s 0s, visibility 0.5s 0s;
-moz-transition: -moz-transform 0.5s 0s, visibility 0.5s 0s;
transition: transform 0.5s 0s, visibility 0.5s 0s;
}
@media only screen and (min-width: 768px) {
.cd-3d-nav-container {
height: 170px;
}
}
.cd-3d-nav {
/* this is the 3D rotating navigation */
position: relative;
height: 100%;
background-color: #343c55;
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-ms-transform-origin: center bottom;
-o-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
.cd-3d-nav::after {
/* menu dark cover layer - to enhance perspective effect */
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000000;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s 0s, visibility 0.5s 0s;
-moz-transition: opacity 0.5s 0s, visibility 0.5s 0s;
transition: opacity 0.5s 0s, visibility 0.5s 0s;
}
.cd-3d-nav li {
height: 100%;
width: 20%;
float: left;
}
.cd-3d-nav li:first-of-type a::before {
background-image: url(../img/icon-1.svg);
}
.cd-3d-nav li:nth-of-type(2) a::before {
background-image: url(../img/icon-2.svg);
}
.cd-3d-nav li:nth-of-type(3) a::before {
background-image: url(../img/icon-3.svg);
}
.cd-3d-nav li:nth-of-type(4) a::before {
background-image: url(../img/icon-4.svg);
}
.cd-3d-nav li:nth-of-type(5) a::before {
background-image: url(../img/icon-5.svg);
}
.cd-3d-nav a {
position: relative;
display: block;
height: 100%;
color: transparent;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-3d-nav a::before {
/* navigation icons */
content: '';
height: 32px;
width: 32px;
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: 32px 64px;
background-repeat: no-repeat;
background-position: 0 0;
}
.no-touch .cd-3d-nav a:hover {
background-color: #2b3145;
}
.cd-3d-nav .cd-selected a {
background-color: #212635;
}
.no-touch .cd-3d-nav .cd-selected a:hover {
background-color: #212635;
}
.cd-3d-nav .cd-selected a::before {
background-position: 0 -32px;
}
.nav-is-visible .cd-3d-nav {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.nav-is-visible .cd-3d-nav::after {
/* menu cover layer - hide it when navigation is visible */
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s 0s, visibility 0s 0.5s;
-moz-transition: opacity 0.5s 0s, visibility 0s 0.5s;
transition: opacity 0.5s 0s, visibility 0s 0.5s;
}
@media only screen and (min-width: 768px) {
.cd-3d-nav a {
padding: 7.6em 1em 0;
color: #ffffff;
font-size: 1.3rem;
font-weight: 600;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* truncate text with ellipsis if too long */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cd-3d-nav a::before {
top: 4.4em;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
}
.cd-marker {
/* line at the bottom of nav selected item */
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 20%;
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-ms-transform-origin: center bottom;
-o-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: translateZ(0) rotateX(90deg);
-moz-transform: translateZ(0) rotateX(90deg);
-ms-transform: translateZ(0) rotateX(90deg);
-o-transform: translateZ(0) rotateX(90deg);
transform: translateZ(0) rotateX(90deg);
-webkit-transition: -webkit-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
-moz-transition: -moz-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
transition: transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
}
.cd-marker::before {
/* triangle at the bottom of nav selected item */
content: '';
position: absolute;
bottom: 3px;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
height: 0;
width: 0;
border: 10px solid transparent;
border-bottom-color: inherit;
}
.nav-is-visible .cd-marker {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
/* these are the colors of the markers - line + arrow */
.color-1 {
color: #9a57bd;
background-color: #9a57bd;
}
.color-2 {
color: #c96aa4;
background-color: #c96aa4;
}
.color-3 {
color: #d6915e;
background-color: #d6915e;
}
.color-4 {
color: #5397c7;
background-color: #5397c7;
}
.color-5 {
color: #77cd91;
background-color: #77cd91;
}
main {
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
main h1 {
text-align: center;
font-size: 2.4rem;
font-weight: 300;
color: #ffffff;
margin: 2em auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
main.nav-is-visible {
-webkit-transform: translateY(80px);
-moz-transform: translateY(80px);
-ms-transform: translateY(80px);
-o-transform: translateY(80px);
transform: translateY(80px);
}
@media only screen and (min-width: 768px) {
main.nav-is-visible {
-webkit-transform: translateY(170px);
-moz-transform: translateY(170px);
-ms-transform: translateY(170px);
-o-transform: translateY(170px);
transform: translateY(170px);
}
main h1 {
font-size: 3.6rem;
margin: 4em auto;
}
}
