Author: | softwaretailoring |
---|---|
Views Total: | 1,032 views |
Official Page: | Go to website |
Last Update: | April 21, 2020 |
License: | MIT |
Preview:

Description:
wheelnav.js is a JavaScript library that lets you create animated, SVG based wheel navigation menus using Raphaël.js.
Basic usage:
Load the wheelnav.js and other required resources in the project.
<script src="js/required/raphael.min.js"></script> <script src="js/required/raphael.icons.js"></script> <script src="js/dist/wheelnav.js"></script>
Create a container for the wheel navigation.
<div id="divWheelnav" class="demo"></div>
The JavaScript to create a basic wheel menu.
var myWheelnav = new wheelnav("divWheelnav"); myWheelnav.slicePathFunction = slicePath().DonutSlice; myWheelnav.colors = new Array("mediumorchid", "royalblue", "darkorange"); myWheelnav.createWheel([icon.github, icon.people, icon.smile]);
You can also add navigation items using Html5 data-attributes.
<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>
var myWheelnav = new wheelnav("divWheelnav");
Changelog:
04/21/2020
- Fixes href parser bug
v1.7.1 (07/12/2018)
- Fix render issue with slicaAngle > 180
- Reorganize navigateFunction
- Fix broken links in README
- New navItem property: titleRotateAngle
- Fixed navigateFunction bug in navigateWheel