Автор

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

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


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

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


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

Как высказался руководитель компании UMIHOST в своем блоге Антон Приходько – Все студии и фрилансеры, занимающиеся изготовлением сайтов, где-то эти сайты в итоге размещают. Редко клиент сам заботится о хостинге своего сайта, а тем более, занимается собственно размещением сайта — чаще всего сайт живет там, куда его «поселил» изготовитель.

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

  1. Как выбрать место размещения сайта таким образом, чтобы не опростоволоситься в глазах заказчика? Чем стабильнее будет работать сайт, тем больше доверия к изготовителю: и карма от этого улучшается, и доверие в итоге окупается.
  2. Как выбрать место для размещения сайта таким образом, чтобы сайт не только стабильно работал, но еще и приносил своему создателю выгоду?

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

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


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close