Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
* {
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%;
z-index: 2;
will-change: transform;
}
#menuBtn svg {
display: block;
}
#menuBtn svg polygon:hover {
-webkit-animation: hexHover 0.7s;
animation: hexHover 0.7s;
cursor: pointer;
}
#menuBtn span {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
padding: 8px 0;
background-clip: content-box;
background-color: #585247;
transform: translate(-50%, -50%);
transition: background-color 0.3s;
pointer-events: none;
}
#menuBtn span:before, #menuBtn span:after {
position: absolute;
background-color: #585247;
content: '';
width: 20px;
height: 2px;
transition: transform 0.3s;
}
#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%;
transform: scale(0.1) translatez(0);
transition: transform 0.05s 0.3s;
}
.tr {
position: absolute;
left: 50%;
bottom: 50%;
width: 34.6%;
height: 40%;
transform-origin: 0 100%;
overflow: hidden;
transform: skewY(-30deg);
opacity: 0;
}
.tr:nth-child(1) {
transform: rotate(0deg) skewY(-30deg);
transition: opacity 0.3s, transform 0.3s;
}
.tr:nth-child(1) .clip {
transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(1) .content {
transform: rotate(-30deg);
transform-origin: 0 0;
padding-left: 15%;
perspective-origin: 30% 70%;
}
.active .tr:nth-child(1) {
transform: rotate(0deg) skewY(-30deg) translate(10%, -10%);
transition: opacity 0.3s 0.05s, transform 0.3s 0.05s cubic-bezier(0, 2.3, 0.8, 1);
}
.tr:nth-child(2) {
transform: rotate(60deg) skewY(-30deg);
transition: opacity 0.3s, transform 0.3s;
}
.tr:nth-child(2) .clip {
transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(2) .content {
transform: rotate(-90deg);
top: -8%;
left: 6.67%;
padding-left: 30%;
perspective-origin: 30% 50%;
}
.active .tr:nth-child(2) {
transform: rotate(60deg) skewY(-30deg) translate(10%, -10%);
transition: opacity 0.3s 0.08s, transform 0.3s 0.08s cubic-bezier(0, 2.3, 0.8, 1);
}
.tr:nth-child(3) {
transform: rotate(120deg) skewY(-30deg);
transition: opacity 0.3s, transform 0.3s;
}
.tr:nth-child(3) .clip {
transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(3) .content {
transform: rotate(-150deg);
transform-origin: 42.3% 36.5%;
padding-left: 10%;
perspective-origin: 30% 30%;
}
.active .tr:nth-child(3) {
transform: rotate(120deg) skewY(-30deg) translate(10%, -10%);
transition: opacity 0.3s 0.11s, transform 0.3s 0.11s cubic-bezier(0, 2.3, 0.8, 1);
}
.tr:nth-child(4) {
transform: rotate(180deg) skewY(-30deg);
transition: opacity 0.3s, transform 0.3s;
}
.tr:nth-child(4) .clip {
transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(4) .content {
transform: rotate(-210deg);
transform-origin: 65.4% 38.4%;
padding-left: 30%;
perspective-origin: 70% 30%;
}
.active .tr:nth-child(4) {
transform: rotate(180deg) skewY(-30deg) translate(10%, -10%);
transition: opacity 0.3s 0.14s, transform 0.3s 0.14s cubic-bezier(0, 2.3, 0.8, 1);
}
.tr:nth-child(5) {
transform: rotate(240deg) skewY(-30deg);
transition: opacity 0.3s, transform 0.3s;
}
.tr:nth-child(5) .clip {
transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(5) .content {
transform: rotate(-270deg);
top: -8%;
left: 6.67%;
padding-left: 15%;
perspective-origin: 70% 50%;
}
.active .tr:nth-child(5) {
transform: rotate(240deg) skewY(-30deg) translate(10%, -10%);
transition: opacity 0.3s 0.17s, transform 0.3s 0.17s cubic-bezier(0, 2.3, 0.8, 1);
}
.tr:nth-child(6) {
transform: rotate(300deg) skewY(-30deg);
transition: opacity 0.3s, transform 0.3s;
}
.tr:nth-child(6) .clip {
transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(6) .content {
transform: rotate(-330deg);
transform-origin: 106.7% 25.2%;
padding-left: 30%;
perspective-origin: 70% 70%;
}
.active .tr:nth-child(6) {
transform: rotate(300deg) skewY(-30deg) translate(10%, -10%);
transition: opacity 0.3s 0.2s, transform 0.3s 0.2s cubic-bezier(0, 2.3, 0.8, 1);
}
.tr:nth-child(7) {
transform: rotate(360deg) skewY(-30deg);
transition: opacity 0.3s, transform 0.3s;
}
.tr:nth-child(7) .clip {
transform: skewY(30deg) rotate(30deg);
}
.tr:nth-child(7) .content {
transform: rotate(-390deg);
}
.active .tr:nth-child(7) {
transform: rotate(360deg) skewY(-30deg) translate(10%, -10%);
transition: opacity 0.3s 0.23s, transform 0.3s 0.23s cubic-bezier(0, 2.3, 0.8, 1);
}
.clip {
position: absolute;
top: 0;
left: 0;
width: 116%;
height: 86.66%;
overflow: hidden;
transform-origin: 0 0;
}
.content {
position: absolute;
width: 86.6%;
height: 116%;
top: 0;
left: 0;
box-sizing: border-box;
font-size: 2vmin;
perspective: 500px;
background: #000;
}
.content img {
position: absolute;
top: 0;
left: -50%;
right: -50%;
margin: auto;
height: 100%;
z-index: -1;
transition: opacity 0.3s;
pointer-events: none;
}
.content h2, .content p {
position: absolute;
width: 60%;
line-height: 1em;
color: #fff;
opacity: 0;
transform: translateZ(-50px);
}
.content h2 {
bottom: 50%;
text-transform: uppercase;
font-weight: 900;
font-size: 2em;
transition: transform 0.3s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s;
}
.content p {
position: absolute;
top: 50%;
font-size: 1em;
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;
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 {
transform: translatey(8px) rotate(45deg);
}
.active #menuBtn span:after {
transform: translatey(-8px) rotate(-45deg);
}
.active #hex {
transform: scale(0.9) translatez(0);
transition: none;
will-change: transform;
}
.active .tr {
opacity: 1;
will-change: transform;
}
</style>
</head>
<body>
<link href='https://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="transparent" 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="http://www.devanswer.com/img/hexonmenu-1.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="http://www.devanswer.com/img/hexonmenu-2.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="http://www.devanswer.com/img/hexonmenu-3.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="http://www.devanswer.com/img/hexonmenu-4.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="http://www.devanswer.com/img/hexonmenu-5.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="http://www.devanswer.com/img/hexonmenu-6.jpg" alt="" />
<h2 class="title">Title</h2><p>Catch phrase</p>
</a></div></li>
</ul>
</nav><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
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';
}
}
</script>
</body>
</html>