HTML5 SVG超炫环状导航菜单动画特效

wheelnav是一款效果非常炫酷的HTML5 SVG环状导航菜单动画特效js插件。该环状导航菜单插件基于Raphaël.js，可以制作各种带动画特效的饼状菜单、环形菜单和径向菜单等等。

该环状导航菜单可以工作在所有的桌面和移动手机的现代浏览器上。它的应用场景有：

• 选项卡导航菜单
• 饼状菜单、环形菜单和径向菜单
• 各类子菜单
• 选项按钮
• 可以当复选框使用
• 还有更多...

安装

可以通过bower或npm来安装该插件。

$ bower install wheelnav
$ npm install wheelnav                
              

使用方法

通过js来调用插件

HTML结构：

<div id="divWheelnav"></div>               
              

js代码：

var myWheelnav = new wheelnav("divWheelnav");
myWheelnav.slicePathFunction = slicePath().WheelSlice;
myWheelnav.colors = colorpalette.parrot;
myWheelnav.createWheel([icon.smile, icon.star, icon.fork, icon.$]);                
              

通过HTML5 data属性来初始化插件

HTML结构：

<div id="divWheelnav" data-wheelnav data-wheelnav-slicepath="WheelSlice" data-wheelnav-colors="#D80351,#F5D908,#00A3EE,#929292">
    <div data-wheelnav-navitemicon="smile">smile</div>
    <div data-wheelnav-navitemicon="star">star</div>
    <div data-wheelnav-navitemicon="fork">fork</div>
    <div data-wheelnav-navitemicon="$">donate</div>
</div>                
              

js代码：

var myWheelnav = new wheelnav("divWheelnav")               
              

应用举例

基本应用

Wheelnav可以通过HTML5 data属性来初始化，data-wheelnav属性是必须的，还有一些可用的data属性可参考下面的例子：

HTML结构：

<div id="divWheel" data-wheelnav 
data-wheelnav-wheelradius="100"
data-wheelnav-navangle="90"
data-wheelnav-slicepath="DonutSlice" 
data-wheelnav-colors="#E34C26,#F06529" 
data-wheelnav-rotateoff>
</div>                
              

js代码：

var wheel = new wheelnav("divWheel");
wheel.createWheel(["0", "1", "2", "3"]);              
              

导航子菜单

你可以通过data-wheelnav-navitemtex或data-wheelnav-navitemicon属性来创建一个环状菜单，制作这种菜单这两个属性必须使用一个。图标的名称来自于raphael.icons.js。

Wheelnav会处理div上的onmouseup事件，并使用超链接上的href属性作为导航地址。

HTML结构：

<div id="divWheel" data-wheelnav>
    <div data-wheelnav-navitemicon="smile"></div>
    <div data-wheelnav-navitemtext="1" onmouseup="alert('Place your logic here.');"></div>
    <div data-wheelnav-navitemtext="2"><a href="#navitem"></a></div>
    <div data-wheelnav-navitemtext="3"></div>
</div>                
              

js代码：

这个例子不需要调用createWheel函数。

var wheel = new wheelnav("divWheel");                
              

Spreader

HTML结构：

<div id="divWheel" data-wheelnav
data-wheelnav-spreader
data-wheelnav-spreaderradius="50"
data-wheelnav-spreaderpath="AntiStarSpreader">
    <div data-wheelnav-navitemtext="0"></div>
    <div data-wheelnav-navitemtext="1"></div>
    <div data-wheelnav-navitemtext="2"></div>
    <div data-wheelnav-navitemtext="3"></div>
</div>                
              

js代码：

var wheel = new wheelnav("divWheel");                
              

Marker

HTML结构：

<div id="divWheel" data-wheelnav 
data-wheelnav-marker 
data-wheelnav-markerpath="DropMarker">
    <div data-wheelnav-navitemtext="0"></div>
    <div data-wheelnav-navitemtext="1"></div>
    <div data-wheelnav-navitemtext="2"></div>
    <div data-wheelnav-navitemtext="3"></div>
</div>              
              

js代码：

var wheel = new wheelnav("divWheel");               
              

更多

你可以在解析环状菜单时通过data-wheelnav-init属性设置更多的参数。

HTML结构：

<div id="divWheel" data-wheelnav data-wheelnav-colors="#E34C26,#F06529" data-wheelnav-slicepath="DonutSlice" data-wheelnav-navangle="30"
data-wheelnav-init>
    <div data-wheelnav-navitemtext=""></div>
    <div data-wheelnav-navitemtext=""></div>
    <div data-wheelnav-navitemtext=""></div>
    <div data-wheelnav-navitemtext=""></div>
    <div data-wheelnav-navitemtext=""></div>
    <div data-wheelnav-navitemtext=""></div>
</div>          
              

js代码：

var wheel = new wheelnav("divWheel");
wheel.navItems[1].slicePathFunction = slicePath().PieSlice;
wheel.navItems[3].slicePathFunction = slicePath().PieSlice;
wheel.navItems[5].slicePathFunction = slicePath().PieSlice;
wheel.createWheel();            
              

该环状菜单插件还有很多的设置，例如颜色配置方案，CSS设置，动画设置等等。

关于wheelnav更详细的介绍前参考官方网站：http://wheelnavjs.softwaretailoring.net/