Автор

Адаптивная 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;
  }
}

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Шумиха по поводу CSS4 возникла абсолютно из ниоткуда, так как мы только привыкли к CSS3, и все планируют использовать эту технологию еще какое-то время. Разработчики браузеров усиленно работают над тем, чтобы их продукт поддерживал самые последние эффекты и свойства, а разработчики внешних интерфейсов создают все больше и больше инструментов для более эффективной работы с таблицами стилей. И сейчас довольно странно слышать что-либо о CSS4. Сразу навязывается вопрос: «А как же CSS3? Разве уже всё?».


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

Сделаем CSS3 анимацию, которую можно будет использовать в качестве прелоадера, статуса загрузки чего-либо. Работает в Firefox, Chrome и Safari.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close