Author: | web-tiki |
---|---|
Views Total: | 3,502 views |
Official Page: | Go to website |
Last Update: | April 25, 2015 |
License: | MIT |
Preview:

Description:
A creative animated hexagon menu with triangle menu items & subtle hover effects built on top of SVG, CSS/CSS3 and a little JavaScript magic.
How to use it:
The html to create a SVG based hexagon navigation with six sub menus.
<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>
The CSS/CSS3 styles for the hexagon 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; } }
The required CSS/CSS3 styles for the 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; }
The JavaScript to active the hexagon menu.
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'; } }
Google Chrome (beta) : The text is very blurry.
How to make it responsive to different screen size?