Автор

28 04.2017
Адаптивная 3D навигация на CSS3 и jQuery

Адаптивная 3D навигация на CSS3 и jQuery


Иногда вы просто хотите, чтобы на вашем сайте была оригинальная навигация и я предлагаю вашему вниманию интересное решение адаптивного 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;
  }
}

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

04 06.2017
Адаптивная 3D навигация на CSS3 и jQuery

Боковая навигация, которая позволяет пользователям легко просматривать страницу, выбирать один из разделов и плавно прокручивать ее. Это не обязательно заменяет основную навигацию по сайту, но пригодится для страниц, наполненных содержимым.


23 04.2013
Адаптивная 3D навигация на CSS3 и jQuery

Как вы возможно заметили, мы достаточно много уделяем внимания по созданию различных галерей для сайта, и это совсем не странно, ведь галерей достаточно много, и они весьма специфические. В данном уроке мы рассмотрим как создать адаптированную галерею с каруселью миниатюр для сайта, с помощью плагина jquery. Галерея будет подстраиваться под размер окна браузера, также можно будет отключить или включить карусель миниатюр. Достаточно удобно можно осуществлять навигацию с помощью клавиатуры.


28 11.2014
Адаптивная 3D навигация на CSS3 и jQuery

Страница 404 одна из наиболее распространенных страниц-ошибок для сайта, действие пользователей часто приводит к перенаправлению их на данную страницу, но когда посетитель видит обычную страницу ошибку, зачастую его просмотр сайта заканчивается, но как сделать, чтобы при попадании на такую страницу пользователи не убегали отвал, а возвращались назад к просмотру сайта. Как показывает статистика, посетители более дружелюбны к сайтам, где оформлены страницы ошибок, чем обычная заглушка ошибки.


23 04.2013
Адаптивная 3D навигация на CSS3 и jQuery

В последнее время чаще встречаются 3d эффекты на сайте, это не удивительно, ведь это позволяет создать иллюзию объемности на ресурсе, при этом это положительно сказывается на посетителях, ведь уникальный пользователь всегда рад чему-то новенькому и интересному, которое можно потрогать самому и посмотреть это в действии. В данном уроке мы рассмотрим как создать эффект переворота изображений, как в книжке, для слайдера изображений и не только. Так как практически все браузеры поддерживают трансформации, то данный эффект станет отличным дополнением..


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close