Biblioteca de menú redondo de JavaScript ligero-radial. js

Vista prévia

Descripción

radial. js es una sencilla biblioteca de JavaScript ligera para crear un menú radial de una matriz de elementos que aparece alrededor del botón de alternancia cuando se alterna.

Funcionamiento

Descargue e incluya la biblioteca de JS. js de radial en su página HTML.

<script src="src/radial.js"></script>

Cree un contenedor DIV vacío para colocar el menú redondo.

<div id="menu-demo"></div>

Cree una matriz de elementos para el menú redondo.

var items = [


{className: '', html: '...'},


{className: '', html: '...'},


{className: '', html: '...'}
];

Pase los parámetros al menú redondo.

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'


}

};

Crear nuevo objeto radial.

var radial = new Radial(items, options);

Anexar radial al contenedor.

var menu = document.getElementById('menu-demo');
menu.appendChild(radial.render());

Al hacer clic en el botón, alternar el menú redondo.

menu.addEventListener('click', function(){

radial.toggle();
});

Agregue estilos CSS personalizados al menú redondo.

#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;
}

Registro de cambios

07/11/2018

• Añadida opción para grados personalizados