插件介绍
这是一款使用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’;
}
}

在线预览 网盘下载

网盘下载密码：ehsh