{"id":93,"date":"2019-05-02T21:53:06","date_gmt":"2019-05-02T21:53:06","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=93"},"modified":"2019-06-16T12:42:43","modified_gmt":"2019-06-16T12:42:43","slug":"crea-un-menu-de-navegacion-animado-con-html-css-y-javascript","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/crea-un-menu-de-navegacion-animado-con-html-css-y-javascript\/","title":{"rendered":"Crea un men\u00fa de navegaci\u00f3n animado con HTML CSS Y JavaScript"},"content":{"rendered":"<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-101 size-full\" src=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot_2019-05-02-Men\u00fa-animado.png\" alt=\"\" width=\"700\" height=\"700\" srcset=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot_2019-05-02-Men\u00fa-animado.png 700w, https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/05\/Screenshot_2019-05-02-Men\u00fa-animado-300x300.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/>Hola, \u00bfQu\u00e9 tal?<\/p>\n<p>EL d\u00eda de hoy veremos como crear un <strong>m<\/strong><b>en\u00fa de navegacion animado adaptable a dispositivos m\u00f3viles <\/b>el cual est\u00e1 explicado paso a paso, as\u00ed que vamos a empezar, no olvides suscribirte al canal de \u00a0<a href=\"https:\/\/youtube.com\/alexcgdesign\" target=\"_blank\" rel=\"noopener noreferrer\">AlexCG Design<\/a> y dejarnos tu manita arriba.<\/p>\n<h2>\ud83d\udccd Herramientas que vamos a utilizar para hacer el men\u00fa de navegacion animado<\/h2>\n<h4>\ud83d\udd35 <a href=\"https:\/\/bennettfeely.com\/clippy\/\" target=\"_blank\" rel=\"noopener noreferrer\">Clip Path Maker <\/a>\u00a0 \u00a0<a href=\"https:\/\/bennettfeely.com\/clippy\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/bennettfeely.com\/clippy\/<\/a><\/h4>\n<p>Esta herramienta te permitir\u00e1 generar en CSS la propiedad Clip Path Maker, en la cual te permite generarlas de manera automatica y sobre todo ver como quedar\u00e1 en tu sitio web, lo m\u00e1s genial es que puede es ADAPTABLE A DISPOSITIVOS MOVILES.<\/p>\n<p>Tenemos un tutorial en el canal de las 7 mejores herramientas de CSS, en la cual encontrar\u00e1s m\u00e1s herramientas como esta.<\/p>\n<h4>\ud83d\udd35 <a href=\"https:\/\/bennettfeely.com\/clippy\/\" target=\"_blank\" rel=\"noopener noreferrer\">UI Gradients <\/a>\u00a0 \u00a0<a href=\"https:\/\/uigradients.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/bennettfeely.com\/clippy\/<\/a><\/h4>\n<p>Esta herramienta te permite usar gradientes en tus sitios web, uno de las herramientas m\u00e1s usadas actualmente en el desarrollo web, adem\u00e1s de eso tiene una grande gama de colores basados en 9 colores y de los cuales se desprenden much\u00edsimos m\u00e1s, realmente una herramienta muy potente en el desarrollo web.<\/p>\n<h3><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f53b.svg\" alt=\"\ud83d\udd3b\" \/>A continuaci\u00f3n te dejaremos el tutorial completo, espero te suscribas al canal y actives la campanita:<\/h3>\n<p><iframe title=\"Menu de navegacion con HTML CSS Y JS Responsive\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/daJT2Hs5IPk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f53b.svg\" alt=\"\ud83d\udd3b\" \/>M\u00e1s informaci\u00f3n:<\/h3>\n<p><a href=\"http:\/\/bit.ly\/2J0ptHI\" target=\"_blank\" rel=\"noopener noreferrer\">Inv\u00edtame un caf\u00e9:<img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/2615.svg\" alt=\"\u2615\ufe0f\" \/>\u00a0[Dando click aqu\u00ed]<\/a><\/p>\n<p><a href=\"http:\/\/www.mediafire.com\/file\/pplm66m7sp4xm6p\/Menu+de+navegacion+animado+AlexCG+Design.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Descarga el m\u00e9nu de navegacion <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f381.svg\" alt=\"\ud83c\udf81\" \/>\u00a0[Dando click aqu\u00ed]<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hola, \u00bfQu\u00e9 tal? EL d\u00eda de hoy veremos como crear un men\u00fa de navegacion animado adaptable a dispositivos m\u00f3viles el cual est\u00e1 explicado paso a paso, as\u00ed que vamos a empezar, no olvides suscribirte al canal de \u00a0AlexCG Design y dejarnos tu manita arriba. \ud83d\udccd Herramientas que vamos a utilizar para hacer el men\u00fa de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":101,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,4,3,5],"tags":[],"class_list":["post-93","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-paginas-web","category-plantillas-de-web","category-tutorial"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=93"}],"version-history":[{"count":0,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/93\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media\/101"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=93"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=93"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}