Автор

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

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

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


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

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


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

Иногда при разработке возникает необходимость вставить ссылку на скайпнейм пользователя, чтобы при нажатии мы перешли к диалогу с владельцем этого скайпнейма. Визуально это может выглядеть так: Skype: studio25kadr

Решить данный вопрос можно таким способом, при нажатии на ссылку мы перейдем к диалогу с пользователем....


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close