Animated SVG Based Wheel Menu – wheelnav.js

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