CSS анимированное шестиугольное меню

318

01 февраля 2018, 16:16

Я пытаюсь найти лучший способ создать анимированное шестиугольное меню.

Пожалуйста, посмотрите для лучшего понимания рисунок:

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

Поэтому мой вопрос заключается в следующем:

Не могли бы вы посоветовать мне, как создавать эту анимацию из шестиугольника с помощью HTML, CSS через jQuery или другими способами.

Какие способы вы бы использовали, чтобы сделать это?

Источник

Answer 1

Вариант с CSS-переменными + clip-path. Тут не вся функциональность, это лишь набросок, но идея, думаю, понятна.

UPD: добавил кнопку и еще немного причесал код.

document.querySelector('.menu__btn').addEventListener('click', () => { 
  document.querySelector('.menu').classList.toggle('menu--open'); 
});

:root { 
  --side: 200px; 
  --a: 25% 5%; 
  --b: 75% 5%; 
  --c: 100% 50%; 
  --d: 75% 95%; 
  --e: 25% 95%; 
  --f: 0% 50%; 
  --g: 50% 50%; 
  --x: 0; 
  --y: 0; 
  --coordAfter: 25px; 
} 
 
.menu { 
  width: var(--side); 
  height: var(--side); 
  padding: 0; 
  margin: 50px auto; 
  position: relative; 
} 
 
.menu__list { 
  padding: 0; 
  margin: 0; 
  list-style-type: none; 
} 
 
.menu__triangle { 
  position: absolute; 
  left: 0; 
  top: 0; 
  transition: transform .25s, opacity .25s; 
  background-color: #d261ff; 
  width: var(--side); 
  height: var(--side); 
  opacity: 0; 
} 
 
.menu__triangle:hover { 
  background-color: #9c29c1; 
} 
 
.menu--open .menu__triangle { 
  transform: translate3d(var(--x), var(--y), 0); 
  opacity: 1; 
} 
 
.menu__btn { 
  border: none; 
  background: none; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  margin: auto; 
  background: #250031; 
  clip-path: polygon(var(--a), var(--b), var(--c), var(--d), var(--e), var(--f)); 
  font-size: 0; 
  width: calc(var(--side) / 6); 
  height: calc(var(--side) / 6); 
  z-index: 1; 
  text-align: center; 
} 
 
.menu__btn:hover, 
.menu--open .menu__btn { 
  background-color: #613175; 
} 
 
.menu__btn-dash { 
  width: calc(var(--side) / 14.285); 
  background-color: #fff; 
  height: 2px; 
  display: inline-block; 
  vertical-align: middle; 
  position: relative; 
} 
 
.menu__btn-dash:after { 
  width: inherit; 
  height: inherit; 
  left: 0; 
  top: 0; 
  background-color: inherit; 
  transform: rotate(90deg); 
  transform-origin: 50% 50%; 
  transition: transform .2s; 
  position: absolute; 
  content: ' '; 
} 
 
.menu--open .menu__btn-dash:after { 
  transform: rotate(0); 
} 
 
.menu__1 { 
  clip-path: polygon(var(--a), var(--b) , var(--g)); 
  --y: calc(var(--coordAfter) * -1); 
} 
 
.menu__2 { 
  clip-path: polygon(var(--g), var(--b), var(--c)); 
  --y: calc(var(--coordAfter) * -1/2); 
  --x: var(--coordAfter); 
} 
 
.menu__3 { 
  clip-path: polygon(var(--g), var(--c), var(--d)); 
  --y: calc(var(--coordAfter) / 2); 
  --x: var(--coordAfter); 
} 
 
.menu__4 { 
  clip-path: polygon(var(--e), var(--g), var(--d)); 
  --y: var(--coordAfter); 
} 
 
.menu__5 { 
  clip-path: polygon(var(--f), var(--g), var(--e)); 
  --x: calc(var(--coordAfter) * -1); 
  --y: calc(var(--coordAfter) / 2); 
} 
 
.menu__6 { 
  clip-path: polygon(var(--f), var(--a), var(--g)); 
  --x: calc(var(--coordAfter) * -1); 
  --y: calc(var(--coordAfter) * -1/2); 
}

<menu class="menu"> 
  <button class="menu__btn"> 
    <span class="menu__btn-dash">Toggle menu</span> 
  </button> 
  <ul class="menu__list"> 
    <li class="menu__triangle menu__1">1</li> 
    <li class="menu__triangle menu__2">2</li> 
    <li class="menu__triangle menu__3">3</li> 
    <li class="menu__triangle menu__4">4</li> 
    <li class="menu__triangle menu__5">5</li> 
    <li class="menu__triangle menu__6">6</li> 
  </ul> 
</menu>

Answer 2

Вот пример и демонстрация:

Hexagon menu demo

И вот анимация gif шестиугольника в действии:

Основные функции меню шестиугольника:

адаптивность - в зависимости от размера viewport (vmin). Это можно изменить, изменив значения width/height на проценты (соотношениесторон должно поддерживаться см. здесь)
Изображения (с тегом <img />), титры и субтитры
6 пунктов меню
анимированный значок гамбургера в шестиугольном контуре
границы пунктов меню привязаны к треугольникам, чтобы они не перекрывали друг друга.Таким образом, событие click и hover state запускаются только тогда, когда фактический элемент меню - hovered/clicked
Может отображаться над изображениями, градиентами или любыми неосновными фонами

Шестиугольная компоновка:

CSS3 2d transforms позволяет создавать треугольники skewY() и rotate()
элементы меню привязаны к треугольникам с помощью классов - .tr и .clip, unskewed с .clip и возврат поворота связан с классом .content, форма шестиугольника вокруг гамбургера выполнена полигоном SVG (легче сделать и получить лучший результат, чем с CSS
Значок гамбургера выполнен с помощью span и двумя псевдоэлементами

Шестиугольное меню с анимацией:

треугольники переходят один за другим (translate() и opacity) со свойством transition-delay
"bounce effect" для треугольника с анимацией производится с помощью функции transition-timming-function и кубической кривой безье.
Значок гамбургера для перекрестной анимации создается путем перехода двух псевдоэлементов (translate() и rotate()) и затухания фона центральных элементов до прозрачного цвета rgba

Hover анимация :

эффект наведения гамбургера достигается путем анимации свойства stroke-dashoffset элемента SVG <polygon>.
названия элементов и субтитры отображаются при наведении с использованием 3D transforms (translateZ()) и непрозрачности. Изображения одновременно исчезают

Используемая технология:

CSS кодируется с помощью SCSS и Autoprefixer, чтобы упростить
запись, чтение и сокращение. Вы можете увидеть скомпилированный CSS, нажав кнопку Скомпилированный вид в демоверсии
(скомпилированный CSS также доступен в конце этого сообщения)
Использован SVG для шестиугольника вокруг иконки гамбургера
HTML для разметки
простой JS для переключения анимации с добавлением класса на контейнере

Поддержка браузерами:

Я тестировал это меню на IE 11, chrome, FF и opera в системе Windows и меню работает во всех этих браузерах.
Chrome и FF визуализируют шрифт с размытием (как видно в анимированном gif, сделанном из хрома), и FF имеет тенденцию создавать зубчатые стороны для треугольников
IE 11 имеет наилучшее качество для шрифтов и треугольников, но он не поддерживает анимацию SMIL и, следовательно, не оказывает эффекта наведения на шестиугольник гамбургера
Я использовал тестирование crossbrowser для проверки поддержки safari, и в этой системе также работает шестиугольное меню.

var hexNav = document.getElementById('hexNav'); 
 
document.getElementById('menuBtn').onclick = function() { 
    var className = ' ' + hexNav.className + ' '; 
    if ( ~className.indexOf(' active ') ) { 
        hexNav.className = className.replace(' active ', ' '); 
    } else { 
        hexNav.className += ' active'; 
    }               
}

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, body { 
  height: 100%; 
} 
 
body { 
  font-family: 'Open Sans', sans-serif; 
  background: #E3DFD2; 
} 
 
ul { 
  list-style-type: none; 
} 
 
a, a:hover, a:focus, a:visited { 
  text-decoration: none; 
} 
 
nav { 
  position: relative; 
  width: 70vmin; 
  height: 70vmin; 
  min-width: 500px; 
  min-height: 500px; 
  margin: 0 auto; 
  overflow: hidden; 
} 
 
/** MENU BUTTON ******************************************/ 
#menuBtn { 
  position: absolute; 
  top: 45%; 
  left: 45%; 
  width: 10%; 
  height: 10%; 
  cursor: pointer; 
  z-index: 2; 
  will-change: transform; 
} 
#menuBtn svg { 
  display: block; 
} 
#menuBtn:hover svg polygon { 
  -webkit-animation: hexHover 0.7s; 
          animation: hexHover 0.7s; 
} 
#menuBtn span { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 20px; 
  height: 2px; 
  padding: 8px 0; 
  background-clip: content-box; 
  background-color: #585247; 
  -webkit-transform: translate(-50%, -50%); 
      -ms-transform: translate(-50%, -50%); 
          transform: translate(-50%, -50%); 
  -webkit-transition: background-color 0.5s; 
          transition: background-color 0.5s; 
} 
#menuBtn span:before, #menuBtn span:after { 
  position: absolute; 
  background-color: #585247; 
  content: ''; 
  width: 20px; 
  height: 2px; 
  -webkit-transition: -webkit-transform 0.5s; 
          transition: transform 0.5s; 
} 
#menuBtn span:before { 
  top: 0; 
} 
#menuBtn span:after { 
  bottom: 0px; 
} 
 
@-webkit-keyframes hexHover { 
  0% { 
    stroke-dasharray: 0,0,300; 
  } 
  10% { 
    stroke-dasharray: 0,20,300; 
  } 
  100% { 
    stroke-dasharray: 300,20,300; 
  } 
} 
 
@keyframes hexHover { 
  0% { 
    stroke-dasharray: 0,0,300; 
  } 
  10% { 
    stroke-dasharray: 0,20,300; 
  } 
  100% { 
    stroke-dasharray: 300,20,300; 
  } 
} 
/** MENU ITEMS *******************************************/ 
#hex { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  -webkit-transform: scale(0.1) translatez(0); 
      -ms-transform: scale(0.1) translatez(0); 
          transform: scale(0.1) translatez(0); 
  -webkit-transition: -webkit-transform 0.05s 0.5s; 
          transition: transform 0.05s 0.5s; 
} 
 
.tr { 
  position: absolute; 
  left: 50%; 
  bottom: 50%; 
  width: 34.6%; 
  height: 40%; 
  -webkit-transform-origin: 0 100%; 
      -ms-transform-origin: 0 100%; 
          transform-origin: 0 100%; 
  overflow: hidden; 
  -webkit-transform: skewY(-30deg); 
      -ms-transform: skewY(-30deg); 
          transform: skewY(-30deg); 
  opacity: 0; 
} 
 
.tr:nth-child(1) { 
  -webkit-transform: rotate(0deg) skewY(-30deg); 
      -ms-transform: rotate(0deg) skewY(-30deg); 
          transform: rotate(0deg) skewY(-30deg); 
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; 
          transition: opacity 0.5s, transform 0.5s; 
} 
.tr:nth-child(1) .clip { 
  -webkit-transform: skewY(30deg) rotate(30deg); 
      -ms-transform: skewY(30deg) rotate(30deg); 
          transform: skewY(30deg) rotate(30deg); 
} 
.tr:nth-child(1) .content { 
  -webkit-transform: rotate(-30deg); 
      -ms-transform: rotate(-30deg); 
          transform: rotate(-30deg); 
  -webkit-transform-origin: 0 0; 
      -ms-transform-origin: 0 0; 
          transform-origin: 0 0; 
  padding-left: 15%; 
  -webkit-perspective-origin: 30% 70%; 
          perspective-origin: 30% 70%; 
} 
 
.active .tr:nth-child(1) { 
  -webkit-transform: rotate(0deg) skewY(-30deg) translate(10%, -10%); 
      -ms-transform: rotate(0deg) skewY(-30deg) translate(10%, -10%); 
          transform: rotate(0deg) skewY(-30deg) translate(10%, -10%); 
  -webkit-transition: opacity 0.5s 0.05s, -webkit-transform 0.5s 0.05s cubic-bezier(0, 2.3, 0.8, 1); 
          transition: opacity 0.5s 0.05s, transform 0.5s 0.05s cubic-bezier(0, 2.3, 0.8, 1); 
} 
 
.tr:nth-child(2) { 
  -webkit-transform: rotate(60deg) skewY(-30deg); 
      -ms-transform: rotate(60deg) skewY(-30deg); 
          transform: rotate(60deg) skewY(-30deg); 
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; 
          transition: opacity 0.5s, transform 0.5s; 
} 
.tr:nth-child(2) .clip { 
  -webkit-transform: skewY(30deg) rotate(30deg); 
      -ms-transform: skewY(30deg) rotate(30deg); 
          transform: skewY(30deg) rotate(30deg); 
} 
.tr:nth-child(2) .content { 
  -webkit-transform: rotate(-90deg); 
      -ms-transform: rotate(-90deg); 
          transform: rotate(-90deg); 
  top: -8%; 
  left: 6.67%; 
  padding-left: 30%; 
  -webkit-perspective-origin: 30% 50%; 
          perspective-origin: 30% 50%; 
} 
 
.active .tr:nth-child(2) { 
  -webkit-transform: rotate(60deg) skewY(-30deg) translate(10%, -10%); 
      -ms-transform: rotate(60deg) skewY(-30deg) translate(10%, -10%); 
          transform: rotate(60deg) skewY(-30deg) translate(10%, -10%); 
  -webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s cubic-bezier(0, 2.3, 0.8, 1); 
          transition: opacity 0.5s 0.1s, transform 0.5s 0.1s cubic-bezier(0, 2.3, 0.8, 1); 
} 
 
.tr:nth-child(3) { 
  -webkit-transform: rotate(120deg) skewY(-30deg); 
      -ms-transform: rotate(120deg) skewY(-30deg); 
          transform: rotate(120deg) skewY(-30deg); 
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; 
          transition: opacity 0.5s, transform 0.5s; 
} 
.tr:nth-child(3) .clip { 
  -webkit-transform: skewY(30deg) rotate(30deg); 
      -ms-transform: skewY(30deg) rotate(30deg); 
          transform: skewY(30deg) rotate(30deg); 
} 
.tr:nth-child(3) .content { 
  -webkit-transform: rotate(-150deg); 
      -ms-transform: rotate(-150deg); 
          transform: rotate(-150deg); 
  -webkit-transform-origin: 42.3% 36.5%; 
      -ms-transform-origin: 42.3% 36.5%; 
          transform-origin: 42.3% 36.5%; 
  padding-left: 10%; 
  -webkit-perspective-origin: 30% 30%; 
          perspective-origin: 30% 30%; 
} 
 
.active .tr:nth-child(3) { 
  -webkit-transform: rotate(120deg) skewY(-30deg) translate(10%, -10%); 
      -ms-transform: rotate(120deg) skewY(-30deg) translate(10%, -10%); 
          transform: rotate(120deg) skewY(-30deg) translate(10%, -10%); 
  -webkit-transition: opacity 0.5s 0.15s, -webkit-transform 0.5s 0.15s cubic-bezier(0, 2.3, 0.8, 1); 
          transition: opacity 0.5s 0.15s, transform 0.5s 0.15s cubic-bezier(0, 2.3, 0.8, 1); 
} 
 
.tr:nth-child(4) { 
  -webkit-transform: rotate(180deg) skewY(-30deg); 
      -ms-transform: rotate(180deg) skewY(-30deg); 
          transform: rotate(180deg) skewY(-30deg); 
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; 
          transition: opacity 0.5s, transform 0.5s; 
} 
.tr:nth-child(4) .clip { 
  -webkit-transform: skewY(30deg) rotate(30deg); 
      -ms-transform: skewY(30deg) rotate(30deg); 
          transform: skewY(30deg) rotate(30deg); 
} 
.tr:nth-child(4) .content { 
  -webkit-transform: rotate(-210deg); 
      -ms-transform: rotate(-210deg); 
          transform: rotate(-210deg); 
  -webkit-transform-origin: 65.4% 38.4%; 
      -ms-transform-origin: 65.4% 38.4%; 
          transform-origin: 65.4% 38.4%; 
  padding-left: 30%; 
  -webkit-perspective-origin: 70% 30%; 
          perspective-origin: 70% 30%; 
} 
 
.active .tr:nth-child(4) { 
  -webkit-transform: rotate(180deg) skewY(-30deg) translate(10%, -10%); 
      -ms-transform: rotate(180deg) skewY(-30deg) translate(10%, -10%); 
          transform: rotate(180deg) skewY(-30deg) translate(10%, -10%); 
  -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s cubic-bezier(0, 2.3, 0.8, 1); 
          transition: opacity 0.5s 0.2s, transform 0.5s 0.2s cubic-bezier(0, 2.3, 0.8, 1); 
} 
 
.tr:nth-child(5) { 
  -webkit-transform: rotate(240deg) skewY(-30deg); 
      -ms-transform: rotate(240deg) skewY(-30deg); 
          transform: rotate(240deg) skewY(-30deg); 
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; 
          transition: opacity 0.5s, transform 0.5s; 
} 
.tr:nth-child(5) .clip { 
  -webkit-transform: skewY(30deg) rotate(30deg); 
      -ms-transform: skewY(30deg) rotate(30deg); 
          transform: skewY(30deg) rotate(30deg); 
} 
.tr:nth-child(5) .content { 
  -webkit-transform: rotate(-270deg); 
      -ms-transform: rotate(-270deg); 
          transform: rotate(-270deg); 
  top: -8%; 
  left: 6.67%; 
  padding-left: 15%; 
  -webkit-perspective-origin: 70% 50%; 
          perspective-origin: 70% 50%; 
} 
 
.active .tr:nth-child(5) { 
  -webkit-transform: rotate(240deg) skewY(-30deg) translate(10%, -10%); 
      -ms-transform: rotate(240deg) skewY(-30deg) translate(10%, -10%); 
          transform: rotate(240deg) skewY(-30deg) translate(10%, -10%); 
  -webkit-transition: opacity 0.5s 0.25s, -webkit-transform 0.5s 0.25s cubic-bezier(0, 2.3, 0.8, 1); 
          transition: opacity 0.5s 0.25s, transform 0.5s 0.25s cubic-bezier(0, 2.3, 0.8, 1); 
} 
 
.tr:nth-child(6) { 
  -webkit-transform: rotate(300deg) skewY(-30deg); 
      -ms-transform: rotate(300deg) skewY(-30deg); 
          transform: rotate(300deg) skewY(-30deg); 
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; 
          transition: opacity 0.5s, transform 0.5s; 
} 
.tr:nth-child(6) .clip { 
  -webkit-transform: skewY(30deg) rotate(30deg); 
      -ms-transform: skewY(30deg) rotate(30deg); 
          transform: skewY(30deg) rotate(30deg); 
} 
.tr:nth-child(6) .content { 
  -webkit-transform: rotate(-330deg); 
      -ms-transform: rotate(-330deg); 
          transform: rotate(-330deg); 
  -webkit-transform-origin: 106.7% 25.2%; 
      -ms-transform-origin: 106.7% 25.2%; 
          transform-origin: 106.7% 25.2%; 
  padding-left: 30%; 
  -webkit-perspective-origin: 70% 70%; 
          perspective-origin: 70% 70%; 
} 
 
.active .tr:nth-child(6) { 
  -webkit-transform: rotate(300deg) skewY(-30deg) translate(10%, -10%); 
      -ms-transform: rotate(300deg) skewY(-30deg) translate(10%, -10%); 
          transform: rotate(300deg) skewY(-30deg) translate(10%, -10%); 
  -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s cubic-bezier(0, 2.3, 0.8, 1); 
          transition: opacity 0.5s 0.3s, transform 0.5s 0.3s cubic-bezier(0, 2.3, 0.8, 1); 
} 
 
.tr:nth-child(7) { 
  -webkit-transform: rotate(360deg) skewY(-30deg); 
      -ms-transform: rotate(360deg) skewY(-30deg); 
          transform: rotate(360deg) skewY(-30deg); 
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; 
          transition: opacity 0.5s, transform 0.5s; 
} 
.tr:nth-child(7) .clip { 
  -webkit-transform: skewY(30deg) rotate(30deg); 
      -ms-transform: skewY(30deg) rotate(30deg); 
          transform: skewY(30deg) rotate(30deg); 
} 
.tr:nth-child(7) .content { 
  -webkit-transform: rotate(-390deg); 
      -ms-transform: rotate(-390deg); 
          transform: rotate(-390deg); 
} 
 
.active .tr:nth-child(7) { 
  -webkit-transform: rotate(360deg) skewY(-30deg) translate(10%, -10%); 
      -ms-transform: rotate(360deg) skewY(-30deg) translate(10%, -10%); 
          transform: rotate(360deg) skewY(-30deg) translate(10%, -10%); 
  -webkit-transition: opacity 0.5s 0.35s, -webkit-transform 0.5s 0.35s cubic-bezier(0, 2.3, 0.8, 1); 
          transition: opacity 0.5s 0.35s, transform 0.5s 0.35s cubic-bezier(0, 2.3, 0.8, 1); 
} 
 
.clip { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 116%; 
  height: 86.66%; 
  overflow: hidden; 
  -webkit-transform-origin: 0 0; 
      -ms-transform-origin: 0 0; 
          transform-origin: 0 0; 
} 
 
.content { 
  position: absolute; 
  width: 86.6%; 
  height: 116%; 
  top: 0; 
  left: 0; 
  box-sizing: border-box; 
  font-size: 2vmin; 
  -webkit-perspective: 500px; 
          perspective: 500px; 
  background: #000; 
} 
.content img { 
  position: absolute; 
  top: 0; 
  left: -50%; 
  right: -50%; 
  margin: auto; 
  height: 100%; 
  z-index: -1; 
  -webkit-transition: opacity 0.3s; 
          transition: opacity 0.3s; 
  pointer-events: none; 
} 
.content h2, .content p { 
  position: absolute; 
  width: 60%; 
  line-height: 1em; 
  color: #fff; 
  opacity: 0; 
  -webkit-transform: translateZ(-50px); 
          transform: translateZ(-50px); 
} 
.content h2 { 
  bottom: 50%; 
  text-transform: uppercase; 
  font-weight: 900; 
  font-size: 2em; 
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s; 
          transition: transform 0.3s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s; 
} 
.content p { 
  position: absolute; 
  top: 50%; 
  font-size: 1em; 
  -webkit-transition: -webkit-transform 0.3s 0.075s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s 0.075s; 
          transition: transform 0.3s 0.075s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s 0.075s; 
} 
.content:hover h2, .content:hover p { 
  opacity: 1; 
  -webkit-transform: translatez(0); 
      -ms-transform: translatez(0); 
          transform: translatez(0); 
} 
.content:hover img { 
  opacity: 0.4; 
} 
 
.active #menuBtn:hover svg polygon { 
  -webkit-animation: none; 
          animation: none; 
} 
.active #menuBtn span { 
  background-color: transparent; 
} 
.active #menuBtn span:before { 
  -webkit-transform: translatey(8px) rotate(45deg); 
      -ms-transform: translatey(8px) rotate(45deg); 
          transform: translatey(8px) rotate(45deg); 
} 
.active #menuBtn span:after { 
  -webkit-transform: translatey(-8px) rotate(-45deg); 
      -ms-transform: translatey(-8px) rotate(-45deg); 
          transform: translatey(-8px) rotate(-45deg); 
} 
.active #hex { 
  -webkit-transform: scale(0.9) translatez(0); 
      -ms-transform: scale(0.9) translatez(0); 
          transform: scale(0.9) translatez(0); 
  -webkit-transition: none; 
          transition: none; 
  will-change: transform; 
} 
.active .tr { 
  opacity: 1; 
  will-change: transform; 
}

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'> 
<nav id="hexNav"> 
  <div id="menuBtn"> 
    <svg viewbox="0 0 100 100"> 
      <polygon points="50 2 7 26 7 74 50 98 93 74 93 26" fill="none" stroke-width="4" stroke="#585247" stroke-dasharray="0,0,300"/> 
    </svg> 
    <span></span> 
  </div> 
  <ul id="hex"> 
    <li class="tr"><div class="clip"><a href="#" class="content"> 
      <img src="https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg" alt="" /> 
      <h2 class="title">Title</h2><p>Catch phrase</p> 
    </a></div></li> 
    <li class="tr"><div class="clip"><a href="#" class="content"> 
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> 
      <h2 class="title">Title</h2><p>Catch phrase</p> 
    </a></div></li> 
    <li class="tr"><div class="clip"><a href="#" class="content"> 
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> 
      <h2 class="title">Title</h2><p>Catch phrase</p> 
    </a></div></li> 
    <li class="tr"><div class="clip"><a href="#" class="content"> 
      <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" /> 
      <h2 class="title">Title</h2><p>Catch phrase</p> 
    </a></div></li> 
    <li class="tr"><div class="clip"><a href="#" class="content"> 
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> 
      <h2 class="title">Title</h2><p>Catch phrase</p> 
    </a></div></li> 
    <li class="tr"><div class="clip"><a href="#" class="content"> 
      <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" /> 
      <h2 class="title">Title</h2><p>Catch phrase</p> 
    </a></div></li> 
  </ul> 
</nav>

Источник

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Laravel 5.5 проблема с объединением таблиц

ЗдравствуйтеНедавно начал работать с фреймворком laravel

278

MySQL

Выборка уникальных строк по одному полю

ЗдравствуйтеИмеется таблица kubki, в ней есть поле seria, нужно выбрать все уникальные значения строк в поле seria, и при этом выбрать все остальные...

323

MySQL

mysql лог больших ответов на запросы

Проблема в том что постоянно идут запросы с большими выборками что загружает исходящий канал mysql сервера

274

MySQL

Запрос со сравнением двух столбцов в MYSQL

Есть две таблицы t1 и t2

266