Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo para alguien que me preguntó hace ya una semana, si conocía alguna forma de crear un menú un poco diferente para mostrar en su web. Como no sé que clase de web quiere montar este usuario, supongo que mejor escribir un poco de código que utilizar un plugin. Por eso, en este ejemplo vamos a ver cómo se puede crear un menú desplegable en espiral, el cual requiere poco JavaScript y algo más de CSS3.
Este sistema de navegación que se expande de forma radial, va a permitir que el botón de alternar muestre al usuario un menú circular utilizando una animación en espiral. Tras esto, el usuario dispondrá de 8 botones para navegar por la web en la que se implemente este menú.
Como decía, para crear este menú desplegable en espiral, vamos a utilizar un archivo HTML para crear la estructura del menú. En el archivo CSS añadiremos las reglas para darle la animación correspondiente al menú y los colores. En otro archivo JavaScript, añadiremos una pequeña función que será la que desencadene el abrir el menú. Para este ejemplo, las imágenes que se muestran, las he guardado dentro de la carpeta assets/icon. Estas imágenes cada usuario debería sustituirlas en la misma carpeta.
Código del menú desplegable en espiral
Archivo HTML
Como decía, este archivo nos servirá para crear el menú desplegable. Aquí podremos personalizar el fondo de cada elemento del menú utilizando la variable –color. Además también veremos otra variable llamada –indice, con la que gracias al archivo CSS podremos personalizar la animación de cada elemento del menú.
Dentro del archivo llamado index.html, solo será necesario pegar el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/main.css">
<link rel="icon" type="image/jpg" href="assets/icon/favicon.ico"/>
<title>Menú que se expande en espiral</title>
<script src="js/main.js" defer></script>
</head>
<body>
<div class="titulo" ><h1>Menú flotante en espiral</h1></div>
<!-- menu Pricipal -->
<ul class="menu">
<div class="desplegable"><img src="assets/icon/centro.png" alt="entreunosyceros"></div>
<!-- Menus Secundarios -->
<li style="--indice:0;--color:#c5fc00;">
<a href="https://entreunosyceros.net/ejemplos/LubricoWars/" title="Un cuento" target="_blank"> <img src="assets/icon/cuento.png" alt="Un cuento"/></a>
</li>
<li style="--indice:1;--color:#fe9800;">
<a href="https://entreunosyceros.net/ejemplos/navegadorm3u8/" title="Reproductor de vídeo" target="_blank"> <img src="assets/icon/tv.png" alt="Reproductos de vídeo"/></a>
</li>
<li style="--indice:2;--color:#19fc04;">
<a href="https://entreunosyceros.net/ejemplos/Tarjeta-perfil-3d/" target="_blank" title="Tarjeta perfil"> <img src="assets/icon/tarjeta.png" alt="Tarjeta de perfil"/></a>
</li>
<li style="--indice:3;--color:#fe00f1;">
<a href="https://entreunosyceros.net/about/#portfolio" target="_blank" title="Portafolio entreunosyceros.net"> <img src="assets/icon/aboutme.png" alt="Portafolio entreunosyceros"/></a>
</li>
<li style="--indice:4;--color:#00fee9;">
<a href="https://entreunosyceros.net/about/#contact" title="Contacto con entreunosyceros.net"> <img src="assets/icon/contacto.png" alt="contacto con entreunosyceros.net"/></a>
</li>
<li style="--indice:5;--color:#fea600;">
<a href="https://entreunosyceros.net/about/" title="About entreunosyceros" target="_blank"> <img src="assets/icon/portafolio.png" alt="Sobre entreunosyceros.net"/></a>
</li>
<li style="--indice:6;--color:#ff0000;">
<a href="https://entreunosyceros.net/about/#service" title="Servicios" target="_blank"> <img src="assets/icon/servicios.png" alt="Servicios entreunosyceros.net"/></a>
</li>
<li style="--indice:7;--color:#00a2ff;">
<a href="https://entreunosyceros.net/ejemplos/youtube/" title="Descargar vídeos de Youtube" target="_blank"> <img src="assets/icon/musica.png" alt="Descargar vídeo de Youtube"/></a>
</li>
</ul>
<br/>
</body>
</html>
Estilos CSS
Los estilos CSS necesarios con los que vamos a dar estilos y animación a nuestro menú, lo vamos a guardar dentro de un archivo llamado main.css. Este archivo lo vamos a guardar dentro de una carpeta llamada css. En este archivo solo será necesario pegar el siguiente código.
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
min-height: 100vh;
margin: 0;
}
body {
display: flex;
background-color: #000000;
justify-content: center;
align-items: center;
}
/*Título*/
.titulo {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
border: none;
font: normal 16px/normal "Warnes", Helvetica, sans-serif;
color: rgba(255, 255, 255, 1);
text-decoration: normal;
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
white-space: pre;
text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
margin-bottom: 15%;
}
.titulo:hover {
text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff, 0 0 100px #00ffff;
}
/* Menú */
.menu {
width: 240px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-left: 15em;
margin-bottom: 15em;
}
/* icono inicio desplegable*/
.menu .desplegable {
position: relative;
display: flex;
width: 70px;
height: 70px;
background: #000000;
border: 2px solid rgb(252, 244, 228);
color: white;
border-radius: 25%;
justify-content: center;
text-align: center;
z-index: 9999;
cursor: pointer;
}
/* Tamaño de las imágenes */
.desplegable img {
width: 60px;
}
.menu li img {
width: 35px;
}
/*Circulo de elementos*/
.menu li {
left: 0;
list-style: none;
position: absolute;
transform-origin: 150px;
transform: rotate(0deg) translateX(110px);
transition: 0.5s;
transition-delay: calc(0.1s * var(--indice));
}
/* Animación de giro del submenú */
.menu.active li {
transform: rotate(calc(360deg / -8 * var(--indice))) translateX(0px);
}
.menu li a {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
color: var(--color);
border: 3px solid var(--color);
border-radius: 25%;
transform: rotate(calc(360deg / 8 * var(--indice)));
transition: 1s;
}
.menu li a:hover {
color: rgb(0, 0, 0);
background: var(--color);
box-shadow: 0 0 20px var(--color),0 0 40px var(--color),0 0 80px var(--color);
}
.desplegable:hover {
box-shadow: 0 5px 10px #fff;
filter: grayscale(100%);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}Archivo JavaScript
Ahora para activar el menú desplegable en espiral, no hay más que crear un archivo llamado main.js. Este archivo se guardará dentro de otra carpeta llamada js. Dentro del archivo, solo tendremos más que pegar el siguiente código:
// Función para activar el menú principal
let toggle = document.querySelector('.desplegable');
let menu = document.querySelector('.menu');
toggle.onclick = function(){
menu.classList.toggle('active')
}Y con esto ya tendrás un menú un poco diferente a los habituales, que con un poco de personalización, no será difícil colocar en una web. Este menú en espiral se puede ver funcionando en la sección de ejemplos de esta web.