wheelnav.js
Animated wheel navigation JavaScript library based on modified Raphaë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
<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.$]);
Via data attributes
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");
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
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/dist/raphael.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/dist/wheelnav.min.js"></script>
Author
Developer: Gábor Berkesi ([email protected])
Development environment: Visual Studio Community 2013 with Web Essentials
License
Licensed under MIT. Enjoy the spinning.
Buy me a beer - if you want to keep in spinning. Thanks a lot!