html5 动画选项卡菜单,HTML5 SVG超炫环状导航菜单动画特效

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

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

选项卡导航菜单

饼状菜单、环形菜单和径向菜单

各类子菜单

选项按钮

可以当复选框使用

还有更多...

安装

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

$ bower install wheelnav

$ npm install wheelnav

使用方法

通过js来调用插件

HTML结构：

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结构：

smile

star

fork

donate

js代码：

var myWheelnav = new wheelnav("divWheelnav")

应用举例

基本应用

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

HTML结构：

data-wheelnav-wheelradius="100"

data-wheelnav-navangle="90"

data-wheelnav-slicepath="DonutSlice"

data-wheelnav-colors="#E34C26,#F06529"

data-wheelnav-rotateoff>

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结构：

js代码：

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

var wheel = new wheelnav("divWheel");

Spreader

HTML结构：

data-wheelnav-spreader

data-wheelnav-spreaderradius="50"

data-wheelnav-spreaderpath="AntiStarSpreader">

js代码：

var wheel = new wheelnav("divWheel");

Marker

HTML结构：

data-wheelnav-marker

data-wheelnav-markerpath="DropMarker">

js代码：

var wheel = new wheelnav("divWheel");

更多

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

HTML结构：

data-wheelnav-init>

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设置，动画设置等等。