Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/softwaretailoring/wheelnav
Animated wheel navigation JavaScript library based on Raphaël.js (SVG/VML). It can be a pie menu (radial menu, circular menu) and many more.
https://github.com/softwaretailoring/wheelnav
pie-menu radial-menu raphaeljs svg
Last synced: about 2 months ago
JSON representation
Animated wheel navigation JavaScript library based on Raphaël.js (SVG/VML). It can be a pie menu (radial menu, circular menu) and many more.
- Host: GitHub
- URL: https://github.com/softwaretailoring/wheelnav
- Owner: softwaretailoring
- License: mit
- Created: 2014-02-02T12:43:19.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2021-03-18T10:25:43.000Z (over 3 years ago)
- Last Synced: 2024-07-19T10:47:00.242Z (2 months ago)
- Topics: pie-menu, radial-menu, raphaeljs, svg
- Language: JavaScript
- Homepage: https://wheelnavjs.softwaretailoring.net
- Size: 2.8 MB
- Stars: 696
- Watchers: 23
- Forks: 101
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
wheelnav.js
===========
[](https://gitter.im/softwaretailoring/wheelnav?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
Animated wheel navigation JavaScript library based on [modified][modifiedraphael] [Raphaël.js][raphaeljs] (SVG/VML).
It works on all major desktop and mobile browser.
Possible uses:
- [tab navigation][wheelizatetabs]
- [pie menu (radial menu, circular menu)][pmg]
- sub menu
- option button
- checkboxes
- and more...
For more insight please visit [https://wheelnavjs.softwaretailoring.net][projectpage]
Demos are available on [CodePen][codepen]
You can find answers on [StackOverflow][stackoverflow] and [GitHub issues][issues]
## Using
### Via JavaScript
HTML
```html
```
JS
```javascript
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
```html
smile
star
fork
donate
```
JS
```javascript
var myWheelnav = new wheelnav("divWheelnav");
```
The index.html of this repo (test page) is available [here][testpage].
## Install
wheelnav.js is available over [npm][npm]
```sh
$ npm install wheelnav
```
and [bower][bower]
```sh
$ bower install wheelnav
```
or CDN by [jsDelivr][jsdelivr]
```html
```
[](https://www.jsdelivr.com/package/npm/wheelnav)
## Author
Developer: Gábor Berkesi ([email protected])
Development environment: [Visual Studio Community 2019][vs2019]
## License
Licensed under [MIT][mit]. Enjoy the spinning.
Buy me a beer - if you want to keep in spinning. Thanks a lot!
[projectpage]: https://wheelnavjs.softwaretailoring.net
[testpage]: https://wheelnavjs.softwaretailoring.net/test
[mit]: https://opensource.org/licenses/mit-license.php
[raphaeljs]: https://dmitrybaranovskiy.github.io/raphael
[modifiedraphael]: https://github.com/softwaretailoring/wheelnav/commits/master/js/required/raphael.js
[npm]: https://www.npmjs.com/package/wheelnav
[bower]: https://bower.io/search/?q=wheelnav
[jsdelivr]: https://www.jsdelivr.com/package/npm/wheelnav
[vs2019]: https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx
[codepen]: https://codepen.io/collection/DORero/
[stackoverflow]: https://stackoverflow.com/questions/tagged/wheelnav.js
[issues]: https://github.com/softwaretailoring/wheelnav/issues
[wheelizatetabs]: https://wtabs.softwaretailoring.net/
[pmg]: https://pmg.softwaretailoring.net/