Simple menú circular HTML CSS y JQuery
¿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>
Deja un comentario