Material diseño estilo radial FAB menu con CSS puro

Vista prévia

Descripción

Un menú de material de diseño inspirado FAB (botón de acción flotante) que aparece un grupo de elementos de menú alrededor del botón de desencadenador. Sin la necesidad de JavaScript y cualquier 3 marcos.

Funcionamiento

Cree los botones de acción flotante con un botón de desencadenador en la Página Web.

<input id="triggerButton" class="triggerButton" type="checkbox">
<label for="triggerButton"></label>

<div class="one">Menu 1</div>
<div class="two">Menu 2</div>
<div class="three">Menu 3</div>

El CSS principal para el botón disparador.

.triggerButton { display: none; }

.triggerButton + label {

cursor: pointer;

position: absolute;

right: 1em;

bottom: 1em;

background-color: tomato;

height: var(--l);

width: var(--l);

border-radius: 50%;

z-index: 2;
}

.triggerButton + label:before, .triggerButton + label:after {

position: absolute;

content: '';

height: calc(var(--l) / 2 );

width: .25em;

background-color: #fff;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

border-radius: .5em;

transition: all .25s;
}

.triggerButton + label:before {

height: calc(var(--l) / 2 );

width: .25em;
}

.triggerButton + label:after {

width: calc(var(--l) / 2 );

height: .25em;
}

.triggerButton:checked + label:before { transform: rotatez(-45deg); }

.triggerButton:checked + label:after { transform: rotatez(-45deg); }

El CSS para los elementos de menú.

.one, .two, .three {

cursor: pointer;

position: absolute;

right: 1em;

bottom: 1em;

padding: 1em;

width: 1em;

height: 1em;

border-radius: 50%;

opacity: 0;

z-index: 1;

transform: rotateZ(90deg);

font-size: 1em;

color: #fff;

transition-property: all;

transition-duration: .35s;

transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.triggerButton:checked ~ .one, .triggerButton:checked ~ .two, .triggerButton:checked ~ .three { opacity: 1; }

.triggerButton:checked ~ .one {

background-color: purple;

transform: translateX(-5em);

transition-delay: .2s;
}

.triggerButton:checked ~ .two {

background-color: slateblue;

transform: translateX(-3.5em) translateY(-3.5em);

transition-delay: .1s;
}

.triggerButton:checked ~ .three {

background-color: mediumorchid;

transform: translateY(-5em);
}

.triggerButton:checked ~.one:hover, .triggerButton:checked ~ .two:hover, .triggerButton:checked ~ .three:hover { opacity: .9; }