Menú emergente radial en CSS puro-menú del círculo

Vista prévia

Descripción

Sin embargo, otro concepto de navegación del menú circular para crear un botón de acción flotante que revela un menú emergente radial al alternar.

Construido con HTML puro y CSS/CSS3. No se requiere JavaScript.

Funcionamiento

Cree el menú emergente radial a partir de una lista no ordenada HTML normal. En este ejemplo, vamos a usar Font awesome 5 para los iconos.

<link rel="stylesheet"



 href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"



 integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"



 crossorigin="anonymous">

<ul id="menu"&gt;

<a class="menu-button icon-plus" href="#menu" title="Show navigation"><span class="fas fa-share-alt"></span></a>

<a class="menu-button icon-minus" href="#0" title="Hide navigation"><span class="fas fa-share-alt"></span></a>

<li class="menu-item">



<a href="#menu">





<span class="fab fa-github"></span>



</a>

</li>

<li class="menu-item">



<a href="#menu">





<span class="fab fa-facebook"></span>



</a>

</li>

<li class="menu-item">



<a href="#menu">





<span class="fab fa-twitter"></span>



</a>

</li>

<li class="menu-item">



<a href="#menu">





<span class="fab fa-instagram"></span>



</a>

</li>
</ul>

Los estilos CSS necesarios para el botón de acción flotante.

#menu {

width: 150px;

height: 150px;

position: absolute;

left: 50%;

top: 50%;

margin: -75px 0 0 -75px;

list-style: none;

font-size: 200%;
}

.menu-button {

opacity: 0;

z-index: -1;
}

.menu-button {

width: 150px;

height: 150px;

position: absolute;

left: 50%;

top: 50%;

margin: -75px 0 0 -75px;

border-radius: 50%;

background: #424242;

background-size: 100%;

overflow: hidden;

text-decoration: none;

line-height: 150px;

color: #fff;
}

#menu:not(:target)>a:first-of-type, #menu:target>a:last-of-type {

opacity: 1;

z-index: 1;
}

#menu:not(:target)>.icon-plus:before, #menu:target>.icon-minus:before { opacity: 1; }

El CSS requerido para los elementos de menú.

.menu-item {

width: 70px;

height: 70px;

position: absolute;

left: 55%;

line-height: 5px;

top: 50%;

margin: -50px 0 0 -50px;

border-radius: 50%;

background-color: #424242;

transform: translate(0px, 0px);

transition: transform 500ms;

z-index: -2;

transition: .5s;
}

.menu-item:hover {

opacity: 0.5;

box-shadow: 0 5px 10px black;
}

.menu-item a {

color: #fff;

position: relative;

top: 30%;

left: 0;

text-decoration: none;
}

#menu:target>.menu-item:nth-child(6) {

transform: rotate(60deg) translateY(-150px) rotate(300deg);

transition-delay: 0s;
}

#menu:target>.menu-item:nth-child(5) {

transform: rotate(20deg) translateY(-155px) rotate(-20deg);

transition-delay: 0.1s;
}

#menu:target>.menu-item:nth-child(3) {

transform: rotate(-20deg) translateY(-155px) rotate(20deg);

transition-delay: 0.2s;
}

#menu:target>.menu-item:nth-child(4) {

transform: rotate(-60deg) translateY(-150px) rotate(60deg);

transition-delay: 0.3s;
}