超炫CSS3六边形菜单动画特效

这是一款使用CSS3和少量js代码制作的炫酷六边形菜单动画特效。该六边形菜单在鼠标滑过时带有高光动画效果，当点击菜单后，各个菜单项沿六边形的各条边向外弹出，组成一个大的六边形。

用方法

HTML结构

该六边形菜单使用一个<svg>来制作，菜单项使用一个无序列表来制作

<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="img/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="img/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="img/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="img/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="img/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="img/6.jpg" alt="" />
 <h2 class="title">Title</h2><p>Catch phrase</p>
 </a></div></li>
 </ul>
</nav>

JavaScript

该六边形菜单使用少量的js代码来监听按钮的鼠标点击事件，为它添加和移除相应的class类。

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