wheelnav.js

Animated wheel navigation JavaScript library based on modifiedRaphaël.js (SVG/VML).

It works on all major desktop and mobile browser.

Possible uses:

• tab navigation
• pie menu (radial menu, circular menu)
• sub menu
• option button
• checkboxes
• and more...

For more insight please visit https://wheelnavjs.softwaretailoring.net
Demos are available on CodePen
You can find answers on StackOverflow and GitHub issues

Using

Via JavaScript

HTML

<divid="divWheelnav"></div>

JS

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

Via data attributes

HTML

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

JS

varmyWheelnav=newwheelnav("divWheelnav");

The index.html of this repo (test page) is available here.

Install

wheelnav.js is available over npm

$ npm install wheelnav

and bower

$ bower install wheelnav

or CDN by jsDelivr

<scriptsrc="https://cdn.jsdelivr.net/npm/wheelnav@1.7.1/js/dist/raphael.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/wheelnav@1.7.1/js/dist/wheelnav.min.js"></script>

Author

Developer: Gábor Berkesi (gabor.berkesi@softwaretailoring.net)

Development environment: Visual Studio Community 2019

License

Licensed under MIT. Enjoy the spinning.

Buy me a beer - if you want to keep in spinning. Thanks a lot!