Get new jQuery plugins just once a week

×

wheelnav-js

FavoriteLoadingAdd to favorites

May 3, 2015

Wheelnav-js | Animated javascript navigation component based on Raphaël-js.

Wheelnav-js is a javascript library for Animated navigation component based on Raphaël.js (SVG/VML).

Created by Gábor Berkesi

Download

Example

wheelnav-js library

rotate things

wheelnav.js

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

Animated wheel navigation JavaScript library based on 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 http://wheelnavjs.softwaretailoring.net

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 type="text/javascript" src="https://cdn.jsdelivr.net/wheelnav/1.7.0/wheelnav.min.js"></script>

Author

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

Development environment: Visual Studio Community 2013 with Web Essentials

License

Licensed under MIT. Enjoy the spinning.

wheelnav-js

Related posts:

Ascensor-js
SooperFish
visualkeys

To install using Bower
bower install wheelnav

wheelnav-js library

http://jquer.in/wp-content/uploads/2015/04/wheelnav-js.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever