Animated SVG Based Wheel Menu – wheelnav.js

Category: Javascript , Menu & Navigation , Recommended | July 12, 2018
Author: softwaretailoring
Views Total: 4,037
Official Page: Go to website
Last Update: July 12, 2018
License: MIT

Preview:

Animated SVG Based Wheel Menu – wheelnav.js

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:

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

You Might Be Interested In:


Leave a Reply