Lightweight JavaScript Round Menu Library – radial.js

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