Menú de alternancia radial con JavaScript y CSS3

Vista prévia

Descripción

Un menú de alternancia radial interactivo creado con transiciones de JavaScript y CSS3 & transformaciones 2D.

Funcionamiento

Cargue la fuente icónica Font awesome para los iconos de menú.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

Cree el HTML para el menú radial.

<div class="menu" id="menu">

<a href="#">


<i class="fa fa-microphone"></i>

</a>

 <a href="#">


<i class="fa fa-user"></i>

</a>

<a href="#">


<i class="fa fa-video-camera"></i>

</a>

<a href="#">


<i class="fa fa-envelope"></i>

</a>

<a href="#">


<i class="fa fa-camera"></i>

</a>

<a href="#">


<i class="fa fa-bell"></i>

</a>
</div>

Cree un elemento para alternar el menú radial.

<div class="toggle" id="toggle" onclick="menu-expand()">

<i class="fa fa-plus" id="plus"></i>
</div>

El CSS principal & estilos CSS.

.toggle {

background-color: #c87f8a;

text-align: center;

height: 100px;

width: 100px;

border-radius: 50%;

position: absolute;

margin: auto;

top: 0px;

bottom: 0px;

left: 0px;

right: 0px;
}

.fa-plus{

font-size: 60px;

color: white;

display: block;

margin-top: 20px;

transition: 0.7s;
}

.menu {

background-color: white;

height: 100px;

width: 100px;

transform: scale(0);

border-radius: 50%;

border-style: double;

border-color: #c87f8a;

position: absolute;

margin: auto;

top: 0px;

bottom: 0px;

left: 0px;

right: 0px;

z-index: -1;

transition: 0.7s;
}

#menu a {

display: inline-block;

position: absolute;

font-size: 15px;

color: #BBBBBB;
}

Organice los iconos del menú alrededor del botón de alternancia.

#menu a:nth-child(1){

top: 6px;

left: 45px;
}

#menu a:nth-child(2){

top: 24px;

left: 77px;
}

#menu a:nth-child(3){

top: 58px;

left: 76px;
}

#menu a:nth-child(4){

top: 78px;

left: 42px;
}

#menu a:nth-child(5){

top: 58px;

left: 10px;
}

#menu a:nth-child(6){

top: 23px;

left: 12px;
}

#menu a:hover {

color: #c87f8a;
}

El principal JavaScript para activar el menú radial.

var i=0;
function expand(){

if(i==0){
document.getElementById("menu").style.transform="scale(3)";


document.getElementById("plus").style.transform="rotate(45deg)";


 i=1;

}

else{
 document.getElementById("menu").style.transform="scale(0)";


document.getElementById("plus").style.transform="rotate(0deg)";


 i=0;

}
}