🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Animated javascript navigation component based on Raphaël.js (SVG/VML). It can be a pie menu (radial menu, circular menu) and many more.It works on all major desktop and mobile browser.Possible uses:tab navigationpie menu (radial menu, circular menu)sub menuoption buttoncheckboxesand more…

Animation Responsive SVG Tutorial Tabs

Documentation

wheelnav.js

Join the chat at https://gitter.im/softwaretailoring/wheelnav

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

It works on all major desktop and mobile browser.

Possible uses:

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");

demo image

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 beerBuy me a beer - if you want to keep in spinning. Thanks a lot!


You May Also Like