Author: | CKGrafico |
---|---|
Views Total: | 2,517 views |
Official Page: | Go to website |
Last Update: | July 11, 2018 |
License: | MIT |
Preview:

Description:
radial.js is a simple lightweight JavaScript library to create a radial menu from an array of items that appears around the toggle button when toggled.
How to use it:
Download and include the radial.js JS library on your html page.
<script src="src/radial.js"></script>
Create an empty DIV container to place the round menu.
<div id="menu-demo"></div>
Create an array of items for the round menu.
var items = [ {className: '', html: '...'}, {className: '', html: '...'}, {className: '', html: '...'} ];
Pass in the parameters to the round menu.
var options = { // True if the first element is a button button: false, // 360 degrees = circle deg: 360, // left to right = +180 direction: 180, // Container dimensions container: { width: '100px', height: '100px' } };
Create new Radial object.
var radial = new Radial(items, options);
Append radial to the container.
var menu = document.getElementById('menu-demo'); menu.appendChild(radial.render());
On click on the button, toggle the round menu.
menu.addEventListener('click', function(){ radial.toggle(); });
Add custom CSS styles to the round menu.
#menu-demo { position: absolute; top: 20%; left: 20%; font-size: 19px; } #menu-demo .radial__item, #menu-demo .radial__button { background: #2a7ae5; color: white; padding: 10px; border-radius: 50%; } #menu-demo .radial__button { cursor: pointer; } #menu-demo .radial__item { z-index: -1; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } #menu-demo .radial__item.show { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; }
Changelog:
07/11/2018
- Added option for custom degrees