Curved Menu
VanillaJS Curved Menu (circular navigation) with radius and angle control.
Preview
Install
npm install --save curved-menu ;
or use
index.js
file fromdist
folder.CurveMenu
will be available onwindow
.
Use
Curved menu will initialize here. Check your console for info. Initialize Curved Menu
var radius = 300; // radius of circle in pxvar angle = 90; // span angle of points on circle (angle between first and last point)var pointSize = 25; // size of points in px // point elements (bullet/buttons)var points = id: 'POINT_ID_1' label: 'Point label 1' id: 'POINT_ID_2' label: 'Point label 2' id: 'POINT_ID_3' label: 'Point label 3' id: 'POINT_ID_4' label: 'Point label 4' id: 'POINT_ID_5' label: 'Point label 5' ; // log notification (demo purpose only) { var notifier = document; var notif = document; notiftextContent = message; notifier;} // once DOM is readywindow;
CSS classes
you can override style using these classes
- .curved-menu
- .curved-menu__curve-container
- .curved-menu__curve-container__curve
- .curved-menu__point
- .curved-menu__point__bullet
- .curved-menu__point__label
Need more development
This plugin was developed just to test circular geometry and SVG filters. It needs more functionality to dynamically add/remove points and add extra configurations. So, any help is appreciated.