Menú hexagonal animado con JavaScript, SVG y CSS3

Vista prévia

Descripción

Un menú hexágono animado creativo con elementos de menú triangular & sutiles efectos flotantes construidos sobre SVG, CSS/CSS3 y un poco de magia JavaScript.

Funcionamiento

El HTML para crear una navegación hexagonal basada en SVG con seis submenús.

<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="1.jpg">




<h2 class="title">Title</h2>




<p>Description</p>




</a></div>


</li>


<li class="tr">



<div class="clip"><a href="#" class="content"> <img src="2.jpg">




<h2 class="title">Title</h2>




<p>Description</p>




</a></div>


</li>


<li class="tr">



<div class="clip"><a href="#" class="content"> <img src="3.jpg">




<h2 class="title">Title</h2>




<p>Description</p>




</a></div>


</li>


<li class="tr">



<div class="clip"><a href="#" class="content"> <img src="4.jpg">




<h2 class="title">Title</h2>




<p>Description</p>




</a></div>


</li>


<li class="tr">



<div class="clip"><a href="#" class="content"> <img src="5.jpg">




<h2 class="title">Title</h2>




<p>Description</p>




</a></div>


</li>


<li class="tr">



<div class="clip"><a href="#" class="content"> <img src="6.jpg">




<h2 class="title">Title</h2>




<p>Description</p>




</a></div>


</li>

</ul>
</nav>

Los estilos CSS/CSS3 para el botón de menú hexagonal.

#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;
}
}

Los estilos CSS/CSS3 requeridos para los elementos de menú.

#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;
}

El JavaScript para activar el menú hexagonal.

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';

}







}