Menú de rueda basado en SVG animado-wheelnav. js

Vista prévia

Descripción

wheelnav. js es una biblioteca de JavaScript que le permite crear menús animados, basados en SVG de navegación de rueda usando Rapha à « l. js .

¿Cómo funciona?

Cargue el wheelnav. js y otros recursos necesarios en el proyecto.

<script src="js/required/raphael.min.js"></script>
 <script src="js/required/raphael.icons.js"></script>
<script src="js/dist/wheelnav.js"></script>

Cree un contenedor para la navegación de la rueda.

<div id="divWheelnav" class="demo"></div>

El JavaScript para crear un menú básico de la rueda.

var myWheelnav = new wheelnav("divWheelnav");



myWheelnav.slicePathFunction = slicePath().DonutSlice;



myWheelnav.colors = new Array("mediumorchid", "royalblue", "darkorange");



myWheelnav.createWheel([icon.github, icon.people, icon.smile]);

También puede agregar elementos de navegación mediante atributos de datos de HTML5.

<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");

Registro de cambios

v1.7.1 (07/12/2018)

• Corrija el problema de renderización con slicaAngle > 180
• Reorganizar navigateFunction
• Corrija los enlaces rotos en README
• Nueva propiedad navItem: titleRotateAngle
• Solucionado el error navigateFunction en navigateWheel