(function(){
// My container
var menu = document.getElementById('menu2');
// Items list, in this case first element is the button
var items = [
{className: 'glyphicon glyphicon-plus'},
{className: 'glyphicon glyphicon-move'},
{className: 'glyphicon glyphicon-edit'},
{className: 'glyphicon glyphicon-check'},
{className: 'glyphicon glyphicon-share'},
{className: 'glyphicon glyphicon-cloud-download'},
{className: 'glyphicon glyphicon-shopping-cart'},
{className: 'glyphicon glyphicon-folder-open'},
{className: 'glyphicon glyphicon-transfer'}
];
// Radial options
var options = {
button: true,
container: {
height: '200px',
width: '200px'
}
};
// Create new Radial object
var radial = new Radial(items, options);
// Append radial to the container
menu.appendChild(radial.render());
// On click on the button, toggle menu
var button = menu.querySelector('.radial__button');
button.addEventListener('click', function(){
radial.toggle();
});
})();
<div id="menu2"></div>
#menu2 {
position: absolute;
top: 20%;
left: 20%;
font-size: 19px;
}
#menu2 .radial__item, #menu2 .radial__button {
background: #2a7ae5;
color: white;
padding: 10px;
border-radius: 50%;
}
#menu2 .radial__button {
cursor: pointer;
}
#menu2 .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;
}
#menu2 .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;
}
External resources loaded into this fiddle: