{"id":47,"date":"2019-10-17T14:10:40","date_gmt":"2019-10-17T19:10:40","guid":{"rendered":"https:\/\/keypro.com.mx\/BLOG\/?p=47"},"modified":"2025-04-25T00:32:35","modified_gmt":"2025-04-25T05:32:35","slug":"simple-menu-circular-html-css-y-jquery","status":"publish","type":"post","link":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/","title":{"rendered":"Simple men\u00fa circular HTML CSS y JQuery – Enrique"},"content":{"rendered":"

Comencemos<\/strong> con la explicaci\u00f3n y el desarrollo de este Men\u00fa circular HTML y CSS como un mini pen…<\/p>\n

La estructura<\/h2>\n

Primero crearemos una carpeta llamada “mi_menu_circular” <\/strong>o algo por el estilo, (esto lo defines t\u00fa) la cual ser\u00e1 nuestra carpeta ra\u00edz.<\/p>\n

Dentro de ella haremos tres archivos, el primero llamado “index.html”, <\/strong>el segundo “<\/strong>styles.css” <\/strong>y el tercero llamado “menu.js”, <\/strong>te deber\u00eda quedar algo as\u00ed:<\/p>\n

\"Estructura<\/p>\n

El cuerpo HTML<\/h2>\n

Procedemos a crear la estructura en HTML que se encargar\u00e1 de darle el cuerpo a nuestro men\u00fa.<\/p>\n

Utilizaremos una etiqueta nav <\/strong>con el ID <\/strong>men\u00fa, dentro de ella un elemento a <\/strong>con el ID<\/strong> btnMenu y ocho elementos a <\/strong>con las clases item y none.<\/p>\n

Adem\u00e1s el ID<\/strong> item$, en donde $ = n\u00famero de \u00edtem.<\/p>\n\n

\n<pre class="CodeMirror cm-s-blackboard" data-setting="%1$s"><div class="menu">\n\t<a href="#" id="btnMenu">Men\u00fa<\/a>\n  \t<a href="#" id="item1" class="item none">Item 1<\/a>\n  \t<a href="#" id="item2" class="item none">Item 2<\/a>\n  \t<a href="#" id="item3" class="item none">Item 3<\/a>\n  \t<a href="#" id="item4" class="item none">Item 4<\/a>\n  \t<a href="#" id="item5" class="item none">Item 5<\/a>\n  \t<a href="#" id="item6" class="item none">Item 6<\/a>\n  \t<a href="#" id="item7" class="item none">Item 7<\/a>\n  \t<a href="#" id="item8" class="item none">Item 8<\/a>\n<\/div><\/pre>\n<\/pre><\/div>\n\n
Cada elemento<\/strong> en una interfaz gr\u00e1fica que diga estar dise\u00f1ado<\/strong> debe tener colores y animaciones<\/strong> debido a que permiten al usuario navegar entendiendo el flujo de lectura.<\/p>\n
Para esto procederemos a darles colores a nuestro men\u00fa de manera similar a crear una p\u00e1gina web.<\/p>\n
Los estilos CSS<\/h2>\n
Estos estilos dan como resultado un aspecto id\u00e9ntico al men\u00fa mostrado <\/strong>al principio del art\u00edculo.<\/p>\n
Sin embargo, puedes modificar<\/strong> los colores y tama\u00f1os de cada parte para lograr alg\u00fan otro efecto y desarrollar el men\u00fa acorde a tus necesidades.<\/p>\n
Recuerda que sin duda el l\u00edmite lo pone tu imaginaci\u00f3n<\/strong>.<\/p>\n\n
\n<pre class="CodeMirror cm-s-blackboard" data-setting="%1$s">* {\n\tmargin: 0;\n\tpadding: 0;\n}\n\nbody {\n\tbackground-image: url("https:\/\/cdn.pixabay.com\/photo\/2016\/10\/22\/01\/54\/wood-1759566_960_720.jpg");\n\tbackground-size: cover;\n\tbackground-attachment: fixed;\n\tbackground-repeat: no-repeat;\n}\n\n.menu {\n\twidth: 100%%;\n\theight: 100%%;\n\tposition: absolute;\n}\n\n.menu a {\n\tleft: 50%%;\n\ttop: 50%%;\n\tcolor: #fff;\n\tpadding: 10px;\n\ttext-decoration: none;\n\tposition: absolute;\n\ttransform: translate(-50%%, -50%%);\n\tborder-radius: 10px 0 10px 0;\n\tborder: 1px solid rgba(0,146,255,1);\n\ttransition: ease background 0.25s;\n}\n\n#btnMenu {\n\tcolor: #fff;\n\tborder-radius: 5px;\n\tbackground: rgba(0,146,255,0.5);\n}\n\n#btnMenu:hover {background: transparent;}\n\n.item:hover {\n\tborder-radius: 0 10px 0 10px;\n\tbackground: rgba(0,146,255,0.5);\n}\n\n.item.none {display: none;}\n\n\/* Estas medidas indican las posiciones de cada item en el plano *\/\n#item2, #item4 {left: 70%%;}\n#item6, #item8 {left: 28%%;}\n#item4, #item6 {top: 68%%;}\n#item2, #item8 {top: 33%%;}\n#item1 {top: 20%%;}\n#item3 {left: 80%%;}\n#item5 {top: 80%%;}\n#item7 {left: 20%%}<\/pre>\n<\/pre><\/div>\n\n
Ahora pasemos a la magia, y es que claro que podemos hacer un men\u00fa interactivo<\/strong> sin necesidad de utilizar Java<\/strong> Script.<\/strong><\/p>\n
En en la actualidad CSS3 <\/strong>nos permite mucho con cada etiqueta de HTML <\/strong>y sus eventos, pero, esta vez lo haremos con el amigable JQuery.<\/strong><\/p>\n
El dinamismo con JQuery<\/h2>\n
Deber\u00e1s incluir la librer\u00eda JQuery<\/strong>\u00a0dentro de nuestro proyecto. \u00bfC\u00f3mo hacemos esto?<\/strong><\/p>\n
Tienes que acceder a<\/strong> la siguiente liga:<\/p>\n
https:\/\/code.jquery.com\/jquery-3.4.1.min.js<\/a><\/p>\n
Una vez dentro ver\u00e1s un mont\u00f3n de c\u00f3digo fuente<\/strong>, lo copias y pegas<\/strong> en un archivo llamado “jquery.min.js”<\/strong>, en la carpeta ra\u00edz de tu proyecto<\/strong>.<\/p>\n
Con el archivo creado, ahora debes enlazarlo a tu p\u00e1gina, copia y pega la siguiente l\u00ednea de c\u00f3digo justo antes de la etiqueta <\/body>.<\/strong><\/p>\n\n
\n<pre class="CodeMirror cm-s-blackboard" data-setting="%1$s"><script type="text\/javascript" src="jquery.min.js"><\/script><\/pre>\n<\/pre><\/div>\n\n
\u00a1Listo!, ya tienes JQuery<\/strong> en tu proyecto, ahora vamos a programar lo que se necesita para que nuestro men\u00fa <\/strong>funcione. \u00a1Manos a la obra!<\/p>\n\n
\n<pre class="CodeMirror cm-s-blackboard" data-setting="%1$s">var i = 1,\n    btnMenu = $("#btnMenu"),\n\titem1 = $("#item1"),\n\titem8 = $("#item8");\n\nbtnMenu.click(function(){\n\tif (item1.hasClass("none") && item8.hasClass("none")) {\n\t\tvar intervalo = setInterval(function(){\n\t\t\t$("#item" + i).slideDown(300).removeClass("none").addClass("visible");\n\t\t\ti++;\n\t\t\t\n\t\t\tif (i > 8) {\n\t\t\t\tclearInterval(intervalo);\n\t\t\t\tbtnMenu.text("Hide");\n\t\t\t\ti = 8;\n\t\t\t}\n\t\t}, 100);\n\t} else if (item1.hasClass("visible") && item8.hasClass("visible")) {\n\t\tvar intervalo = setInterval(function() {\n\t\t\t$("#item" + i).slideUp(300).removeClass("visible").addClass("none");\n\t\t\ti--;\n\t\t\t\n\t\t\tif (i == 0) {\n\t\t\t\tclearInterval(intervalo);\n\t\t\t\tbtnMenu.text("Men\u00fa");\n\t\t\t\ti = 1;\n\t\t\t}\n\t\t}, 100);\n\t}\n});<\/pre>\n<\/pre><\/div>\n\n
\u00a1Excelente!<\/strong>, ya hemos finalizado toda la programaci\u00f3n de nuestro Men\u00fa circular HTML y CSS, demos un vistazo a tu archivo completo index.html.<\/strong><\/p>\n
El men\u00fa completo<\/h2>\n\n
\n<pre class="CodeMirror cm-s-blackboard" data-setting="%1$s"><!DOCTYPE html>\n<html lang="es">\n<head>\n\t<meta charset="UTF-8">\n\t<title>Simple Men\u00fa Circular<\/title>\n\t<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">\n\t<link rel="stylesheet" href="styles.css">\n<\/head>\n<body>\n\t<div class="menu">\n\t\t<a href="#" id="btnMenu">Men\u00fa<\/a>\n\t\t<a href="#" id="item1" class="item none">Item 1<\/a>\n\t\t<a href="#" id="item2" class="item none">Item 2<\/a>\n\t\t<a href="#" id="item3" class="item none">Item 3<\/a>\n\t\t<a href="#" id="item4" class="item none">Item 4<\/a>\n\t\t<a href="#" id="item5" class="item none">Item 5<\/a>\n\t\t<a href="#" id="item6" class="item none">Item 6<\/a>\n\t\t<a href="#" id="item7" class="item none">Item 7<\/a>\n\t\t<a href="#" id="item8" class="item none">Item 8<\/a>\n\t<\/div>\n\t\n\t<script src="jquery.min.js"><\/script>\n\t<script src="menu.js"><\/script>\n<\/body>\n<\/html><\/pre>\n<\/pre><\/div>\n\n
 <\/strong><\/p>\n
Recursos y enlaces<\/h2>\n
<\/p>\n
\u2022 El ejemplo funcional<\/a><\/p>\n
\u2022 Descarga el men\u00fa completo<\/a><\/p>\n
\u2022 Un banco de im\u00e1genes<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u00bfTe gustar\u00eda implementar un Men\u00fa circular HTML y CSS en tus dise\u00f1os pero las ideas que encuentras son bastante complejas?, Entonces este men\u00fa es para ti. En este art\u00edculo te ense\u00f1o a crearlo desde cero, \u00fanicamente con conocimientos b\u00e1sicos en HTML, CSS y la librer\u00eda JQuery de Java Script.<\/p>\n","protected":false},"author":1,"featured_media":56,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[15,8,3,2,14,16,17,18,13],"class_list":["post-47","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-keypro-tutoriales","tag-css","tag-desarrollo-de-paginas-web","tag-desarrollo-web","tag-diseno-web","tag-html","tag-javascript","tag-jquery","tag-menu-circular","tag-tutoriales"],"yoast_head":"\nMen\u00fa circular HTML Y CSS – Blog | KeyPro Desarrollo web<\/title>\n<meta name=\"description\" content=\"\u00bfTe gustar\u00eda implementar un men\u00fa circular HTML y CSS en tus dise\u00f1os pero las ideas que encuentras son bastante complejas?, Entonces este men\u00fa es para ti.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Men\u00fa circular HTML Y CSS – Blog | KeyPro Desarrollo web\" \/>\n<meta property=\"og:description\" content=\"\u00bfTe gustar\u00eda implementar un men\u00fa circular HTML y CSS en tus dise\u00f1os pero las ideas que encuentras son bastante complejas?, Entonces este men\u00fa es para ti.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | KeyPro Desarrollo web\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-17T19:10:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-25T05:32:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/keypro.com.mx\/BLOG\/wp-content\/uploads\/2019\/10\/Menu.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Enrique Carranza\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Enrique Carranza\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/\"},\"author\":{\"name\":\"Enrique Carranza\",\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/#\/schema\/person\/3ac5c8c58d7e76984eddde6bd1d61f30\"},\"headline\":\"Simple men\u00fa circular HTML CSS y JQuery – Enrique\",\"datePublished\":\"2019-10-17T19:10:40+00:00\",\"dateModified\":\"2025-04-25T05:32:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/\"},\"wordCount\":451,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/#\/schema\/person\/3ac5c8c58d7e76984eddde6bd1d61f30\"},\"image\":{\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/keypro.com.mx\/BLOG\/wp-content\/uploads\/2019\/10\/Menu.png\",\"keywords\":[\"css\",\"desarrollo de p\u00e1ginas web\",\"Desarrollo web\",\"Dise\u00f1o web\",\"html\",\"javascript\",\"jquery\",\"menu circular\",\"tutoriales\"],\"articleSection\":[\"Tutoriales KeyPro\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/\",\"url\":\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/\",\"name\":\"Men\u00fa circular HTML Y CSS – Blog | KeyPro Desarrollo web\",\"isPartOf\":{\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/keypro.com.mx\/BLOG\/wp-content\/uploads\/2019\/10\/Menu.png\",\"datePublished\":\"2019-10-17T19:10:40+00:00\",\"dateModified\":\"2025-04-25T05:32:35+00:00\",\"description\":\"\u00bfTe gustar\u00eda implementar un men\u00fa circular HTML y CSS en tus dise\u00f1os pero las ideas que encuentras son bastante complejas?, Entonces este men\u00fa es para ti.\",\"breadcrumb\":{\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#primaryimage\",\"url\":\"https:\/\/keypro.com.mx\/BLOG\/wp-content\/uploads\/2019\/10\/Menu.png\",\"contentUrl\":\"https:\/\/keypro.com.mx\/BLOG\/wp-content\/uploads\/2019\/10\/Menu.png\",\"width\":1366,\"height\":768,\"caption\":\"Men\u00fa circular\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/keypro.com.mx\/BLOG\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simple men\u00fa circular HTML CSS y JQuery – Enrique\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/#website\",\"url\":\"https:\/\/keypro.com.mx\/BLOG\/\",\"name\":\"Blog | KeyPro Desarrollo web\",\"description\":\"\u00bfBuscas hacer crecer tu negocio con presencia en la red? Entonces, \u00a1Este es tu sitio! Con nosotros un sitio profesional y amigable marca la diferencia. Descubre los beneficios que tenemos para ti ahora.\",\"publisher\":{\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/#\/schema\/person\/3ac5c8c58d7e76984eddde6bd1d61f30\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/keypro.com.mx\/BLOG\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/keypro.com.mx\/BLOG\/#\/schema\/person\/3ac5c8c58d7e76984eddde6bd1d61f30\",\"name\":\"Enrique Carranza\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/08f80db73b49e946b232b018a26d748417c922a4a374a57ea1b1388556afcf32?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/08f80db73b49e946b232b018a26d748417c922a4a374a57ea1b1388556afcf32?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/08f80db73b49e946b232b018a26d748417c922a4a374a57ea1b1388556afcf32?s=96&r=g\",\"caption\":\"Enrique Carranza\"},\"logo\":{\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/08f80db73b49e946b232b018a26d748417c922a4a374a57ea1b1388556afcf32?s=96&r=g\"},\"description\":\"Estudiante de Ingenier\u00eda en Computaci\u00f3n, Desarrollador web freelance y T\u00e9cnico en computaci\u00f3n. I'm developing a fantastic world. I want be the best in my work area.\",\"sameAs\":[\"https:\/\/github.com\/DarkHawk21\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Men\u00fa circular HTML Y CSS – Blog | KeyPro Desarrollo web","description":"\u00bfTe gustar\u00eda implementar un men\u00fa circular HTML y CSS en tus dise\u00f1os pero las ideas que encuentras son bastante complejas?, Entonces este men\u00fa es para ti.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/","og_locale":"es_MX","og_type":"article","og_title":"Men\u00fa circular HTML Y CSS – Blog | KeyPro Desarrollo web","og_description":"\u00bfTe gustar\u00eda implementar un men\u00fa circular HTML y CSS en tus dise\u00f1os pero las ideas que encuentras son bastante complejas?, Entonces este men\u00fa es para ti.","og_url":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/","og_site_name":"Blog | KeyPro Desarrollo web","article_published_time":"2019-10-17T19:10:40+00:00","article_modified_time":"2025-04-25T05:32:35+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/keypro.com.mx\/BLOG\/wp-content\/uploads\/2019\/10\/Menu.png","type":"image\/png"}],"author":"Enrique Carranza","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Enrique Carranza","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#article","isPartOf":{"@id":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/"},"author":{"name":"Enrique Carranza","@id":"https:\/\/keypro.com.mx\/BLOG\/#\/schema\/person\/3ac5c8c58d7e76984eddde6bd1d61f30"},"headline":"Simple men\u00fa circular HTML CSS y JQuery – Enrique","datePublished":"2019-10-17T19:10:40+00:00","dateModified":"2025-04-25T05:32:35+00:00","mainEntityOfPage":{"@id":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/"},"wordCount":451,"commentCount":1,"publisher":{"@id":"https:\/\/keypro.com.mx\/BLOG\/#\/schema\/person\/3ac5c8c58d7e76984eddde6bd1d61f30"},"image":{"@id":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/keypro.com.mx\/BLOG\/wp-content\/uploads\/2019\/10\/Menu.png","keywords":["css","desarrollo de p\u00e1ginas web","Desarrollo web","Dise\u00f1o web","html","javascript","jquery","menu circular","tutoriales"],"articleSection":["Tutoriales KeyPro"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/","url":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/","name":"Men\u00fa circular HTML Y CSS – Blog | KeyPro Desarrollo web","isPartOf":{"@id":"https:\/\/keypro.com.mx\/BLOG\/#website"},"primaryImageOfPage":{"@id":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#primaryimage"},"image":{"@id":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/keypro.com.mx\/BLOG\/wp-content\/uploads\/2019\/10\/Menu.png","datePublished":"2019-10-17T19:10:40+00:00","dateModified":"2025-04-25T05:32:35+00:00","description":"\u00bfTe gustar\u00eda implementar un men\u00fa circular HTML y CSS en tus dise\u00f1os pero las ideas que encuentras son bastante complejas?, Entonces este men\u00fa es para ti.","breadcrumb":{"@id":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#primaryimage","url":"https:\/\/keypro.com.mx\/BLOG\/wp-content\/uploads\/2019\/10\/Menu.png","contentUrl":"https:\/\/keypro.com.mx\/BLOG\/wp-content\/uploads\/2019\/10\/Menu.png","width":1366,"height":768,"caption":"Men\u00fa circular"},{"@type":"BreadcrumbList","@id":"https:\/\/keypro.com.mx\/BLOG\/simple-menu-circular-html-css-y-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/keypro.com.mx\/BLOG\/"},{"@type":"ListItem","position":2,"name":"Simple men\u00fa circular HTML CSS y JQuery – Enrique"}]},{"@type":"WebSite","@id":"https:\/\/keypro.com.mx\/BLOG\/#website","url":"https:\/\/keypro.com.mx\/BLOG\/","name":"Blog | KeyPro Desarrollo web","description":"\u00bfBuscas hacer crecer tu negocio con presencia en la red? Entonces, \u00a1Este es tu sitio! Con nosotros un sitio profesional y amigable marca la diferencia. Descubre los beneficios que tenemos para ti ahora.","publisher":{"@id":"https:\/\/keypro.com.mx\/BLOG\/#\/schema\/person\/3ac5c8c58d7e76984eddde6bd1d61f30"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/keypro.com.mx\/BLOG\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/keypro.com.mx\/BLOG\/#\/schema\/person\/3ac5c8c58d7e76984eddde6bd1d61f30","name":"Enrique Carranza","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/08f80db73b49e946b232b018a26d748417c922a4a374a57ea1b1388556afcf32?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/08f80db73b49e946b232b018a26d748417c922a4a374a57ea1b1388556afcf32?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/08f80db73b49e946b232b018a26d748417c922a4a374a57ea1b1388556afcf32?s=96&r=g","caption":"Enrique Carranza"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/08f80db73b49e946b232b018a26d748417c922a4a374a57ea1b1388556afcf32?s=96&r=g"},"description":"Estudiante de Ingenier\u00eda en Computaci\u00f3n, Desarrollador web freelance y T\u00e9cnico en computaci\u00f3n. I'm developing a fantastic world. I want be the best in my work area.","sameAs":["https:\/\/github.com\/DarkHawk21"]}]}},"_links":{"self":[{"href":"https:\/\/keypro.com.mx\/BLOG\/wp-json\/wp\/v2\/posts\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/keypro.com.mx\/BLOG\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/keypro.com.mx\/BLOG\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/keypro.com.mx\/BLOG\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/keypro.com.mx\/BLOG\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":51,"href":"https:\/\/keypro.com.mx\/BLOG\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/keypro.com.mx\/BLOG\/wp-json\/wp\/v2\/posts\/47\/revisions\/114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/keypro.com.mx\/BLOG\/wp-json\/wp\/v2\/media\/56"}],"wp:attachment":[{"href":"https:\/\/keypro.com.mx\/BLOG\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/keypro.com.mx\/BLOG\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/keypro.com.mx\/BLOG\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}