Simple menú circular HTML CSS y JQuery – Enrique
¿Te gustaría implementar un Menú circular HTML y CSS en tus diseños pero las ideas que encuentras son bastante complejas?, Entonces este menú es para ti. En este artículo te enseño a crearlo desde cero, únicamente con conocimientos básicos en HTML, CSS y la librería JQuery de Java Script.
Comencemos con la explicación y el desarrollo de este Menú circular HTML y CSS como un mini pen…
La estructura
Primero crearemos una carpeta llamada “mi_menu_circular” o algo por el estilo, (esto lo defines tú) la cual será nuestra carpeta raíz.
Dentro de ella haremos tres archivos, el primero llamado “index.html”, el segundo “styles.css” y el tercero llamado “menu.js”, te debería quedar algo así:
El cuerpo HTML
Procedemos a crear la estructura en HTML que se encargará de darle el cuerpo a nuestro menú.
Utilizaremos una etiqueta nav con el ID menú, dentro de ella un elemento a con el ID btnMenu y ocho elementos a con las clases item y none.
Además el ID item$, en donde $ = número de ítem.
<div class="menu"> <a href="#" id="btnMenu">Menú</a> <a href="#" id="item1" class="item none">Item 1</a> <a href="#" id="item2" class="item none">Item 2</a> <a href="#" id="item3" class="item none">Item 3</a> <a href="#" id="item4" class="item none">Item 4</a> <a href="#" id="item5" class="item none">Item 5</a> <a href="#" id="item6" class="item none">Item 6</a> <a href="#" id="item7" class="item none">Item 7</a> <a href="#" id="item8" class="item none">Item 8</a> </div>
Cada elemento en una interfaz gráfica que diga estar diseñado debe tener colores y animaciones debido a que permiten al usuario navegar entendiendo el flujo de lectura.
Para esto procederemos a darles colores a nuestro menú de manera similar a crear una página web.
Los estilos CSS
Estos estilos dan como resultado un aspecto idéntico al menú mostrado al principio del artículo.
Sin embargo, puedes modificar los colores y tamaños de cada parte para lograr algún otro efecto y desarrollar el menú acorde a tus necesidades.
Recuerda que sin duda el límite lo pone tu imaginación.
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://cdn.pixabay.com/photo/2016/10/22/01/54/wood-1759566_960_720.jpg");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.menu {
width: 100%;
height: 100%;
position: absolute;
}
.menu a {
left: 50%;
top: 50%;
color: #fff;
padding: 10px;
text-decoration: none;
position: absolute;
transform: translate(-50%, -50%);
border-radius: 10px 0 10px 0;
border: 1px solid rgba(0,146,255,1);
transition: ease background 0.25s;
}
#btnMenu {
color: #fff;
border-radius: 5px;
background: rgba(0,146,255,0.5);
}
#btnMenu:hover {background: transparent;}
.item:hover {
border-radius: 0 10px 0 10px;
background: rgba(0,146,255,0.5);
}
.item.none {display: none;}
/* Estas medidas indican las posiciones de cada item en el plano */
#item2, #item4 {left: 70%;}
#item6, #item8 {left: 28%;}
#item4, #item6 {top: 68%;}
#item2, #item8 {top: 33%;}
#item1 {top: 20%;}
#item3 {left: 80%;}
#item5 {top: 80%;}
#item7 {left: 20%}Ahora pasemos a la magia, y es que claro que podemos hacer un menú interactivo sin necesidad de utilizar Java Script.
En en la actualidad CSS3 nos permite mucho con cada etiqueta de HTML y sus eventos, pero, esta vez lo haremos con el amigable JQuery.
El dinamismo con JQuery
Deberás incluir la librería JQuery dentro de nuestro proyecto. ¿Cómo hacemos esto?
Tienes que acceder a la siguiente liga:
https://code.jquery.com/jquery-3.4.1.min.js
Una vez dentro verás un montón de código fuente, lo copias y pegas en un archivo llamado “jquery.min.js”, en la carpeta raíz de tu proyecto.
Con el archivo creado, ahora debes enlazarlo a tu página, copia y pega la siguiente línea de código justo antes de la etiqueta </body>.
<script type="text/javascript" src="jquery.min.js"></script>
¡Listo!, ya tienes JQuery en tu proyecto, ahora vamos a programar lo que se necesita para que nuestro menú funcione. ¡Manos a la obra!
var i = 1,
btnMenu = $("#btnMenu"),
item1 = $("#item1"),
item8 = $("#item8");
btnMenu.click(function(){
if (item1.hasClass("none") && item8.hasClass("none")) {
var intervalo = setInterval(function(){
$("#item" + i).slideDown(300).removeClass("none").addClass("visible");
i++;
if (i > 8) {
clearInterval(intervalo);
btnMenu.text("Hide");
i = 8;
}
}, 100);
} else if (item1.hasClass("visible") && item8.hasClass("visible")) {
var intervalo = setInterval(function() {
$("#item" + i).slideUp(300).removeClass("visible").addClass("none");
i--;
if (i == 0) {
clearInterval(intervalo);
btnMenu.text("Menú");
i = 1;
}
}, 100);
}
});¡Excelente!, ya hemos finalizado toda la programación de nuestro Menú circular HTML y CSS, demos un vistazo a tu archivo completo index.html.
El menú completo
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Simple Menú Circular</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="menu"> <a href="#" id="btnMenu">Menú</a> <a href="#" id="item1" class="item none">Item 1</a> <a href="#" id="item2" class="item none">Item 2</a> <a href="#" id="item3" class="item none">Item 3</a> <a href="#" id="item4" class="item none">Item 4</a> <a href="#" id="item5" class="item none">Item 5</a> <a href="#" id="item6" class="item none">Item 6</a> <a href="#" id="item7" class="item none">Item 7</a> <a href="#" id="item8" class="item none">Item 8</a> </div> <script src="jquery.min.js"></script> <script src="menu.js"></script> </body> </html>
Hola!
Estoy fascinada con este menú circular. Lo he practicado en local y se ve genial.
Pero si lo quiero llevar a un wordpress con elementor…se altera y los botones aparecen solapados. Me tiene super intrigada porque no sé porqué hace eso.
Le estoy dando mil vueltas. Confieso que hasta me levanto de la cama para probar una nueva idea…pero no consigo hallar la solución.
Sé que lo mismo es mucho pedir, pero estaría super agradecida si me dais una clave para resolver este enigma. Me tiene frita y odio no poder resolverlo.
Os he dejado una URL donde estoy haciendo pruebas chorra para que podáis ver lo que pasa.
En todo caso, gracias por mostrar ideas y ejemplos tan ilustrativos. Aprendo muchísimo.
Un saludo