JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Animated javascript navigation component based on Raphaël.js (SVG/VML). It can be a pie menu (radial menu, circular menu) and many more.
    Filed under 

    • 🔾33%Overall
    • 691
    • 32.9 days
    • 🕩103
    • 👥3

    wheelnav.js

    Join the chat at https://gitter.im/softwaretailoring/wheelnav

    Animated wheel navigation JavaScript library based on modified Raphaël.js (SVG/VML).

    It works on all major desktop and mobile browser.

    Possible uses:

    For more insight please visit https://wheelnavjs.softwaretailoring.net
    Demos are available on CodePen
    You can find answers on StackOverflow and GitHub issues

    Using

    Via JavaScript

    HTML

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

    JS

    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

    <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>
    

    JS

    var myWheelnav = new wheelnav("divWheelnav");
    

    demo image

    The index.html of this repo (test page) is available here.

    Install

    wheelnav.js is available over npm

    $ npm install wheelnav
    

    and bower

    $ bower install wheelnav
    

    or CDN by jsDelivr

    <script src="https://cdn.jsdelivr.net/npm/wheelnav@1.7.1/js/dist/raphael.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/wheelnav@1.7.1/js/dist/wheelnav.min.js"></script>
    

    Author

    Developer: Gábor Berkesi (gabor.berkesi@softwaretailoring.net)

    Development environment: Visual Studio Community 2019

    License

    Licensed under MIT. Enjoy the spinning.

    Buy me a beerBuy me a beer - if you want to keep in spinning. Thanks a lot!

    Show All