{"id":1411,"date":"2012-01-14T18:13:14","date_gmt":"2012-01-14T18:13:14","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1411"},"modified":"2019-03-02T09:17:51","modified_gmt":"2019-03-02T09:17:51","slug":"lavalamp-menu","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/","title":{"rendered":"LavaLamp Menu"},"content":{"rendered":"<div dir=\"ltr\">En este art\u00edculo vamos a hablar de un men\u00fa horizontal bastante agradable y editable que se podr\u00eda utilizar en cualquier Web dando un aspecto profesional. Se trata de un fancy menu muy similar conocido como LavaLamp que se desarroll\u00f3 en la biblioteca de Mootools y m\u00e1s tarde se desarroll\u00f3 una versi\u00f3n en jQuery. Podemos lograr este efecto utilizando CSS3 con sus nuevas caracter\u00edsticas.<\/div>\n<div dir=\"ltr\"><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/lava-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1412\" title=\"lava-1\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/lava-1.jpg\" alt=\"\" width=\"574\" height=\"349\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/lava-1.jpg 574w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/lava-1-300x182.jpg 300w\" sizes=\"auto, (max-width: 574px) 100vw, 574px\" \/><\/a><\/div>\n<div id=\"gt-res-content\">\n<div dir=\"ltr\">El men\u00fa se puede editar muy f\u00e1cilmente ya sea en su css o html. En el ejemplo mostramos varios ejemplos utilizando colores distintos.<\/div>\n<\/div>\n<div dir=\"ltr\">El c\u00f3digo HTML que debemos emplear es el siguiente:<\/div>\n<pre>&lt;div class=\"lavalamp\"&gt;\r\n&lt;ul&gt;\r\n&lt;li class=\"active\"&gt;&lt;a href=\"\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"\"&gt;About&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"\"&gt;Blog&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"\"&gt;Services&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"\"&gt;Portfolio&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"\"&gt;Contacts&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"\"&gt;Back to Article&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"\"&gt;How it Works?&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n&lt;div class=\"floatr\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Y como c\u00f3digos CSS, contemplar lo siguiente:<\/p>\n<pre>.lavalamp {\r\n\u00a0\u00a0\u00a0 position: relative;\r\n\u00a0\u00a0\u00a0 border: 1px solid #d6d6d6;\r\n\u00a0\u00a0\u00a0 background: #fff;\r\n\u00a0\u00a0\u00a0 padding: 15px;\r\n\u00a0\u00a0\u00a0 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);\r\n\u00a0\u00a0\u00a0 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);\r\n\u00a0\u00a0\u00a0 border-radius : 10px;\r\n\u00a0\u00a0\u00a0 -moz-border-radius : 10px;\r\n\u00a0\u00a0\u00a0 -webkit-border-radius : 10px;\r\n\u00a0\u00a0\u00a0 background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));\r\n\u00a0\u00a0\u00a0 background : -moz-linear-gradient(top, rgb(240,240,240), rgb(204,204,204));\r\n\u00a0\u00a0\u00a0 height: 18px;\r\n}\r\n\r\nul {\r\n\u00a0\u00a0\u00a0 margin: 0;\r\n\u00a0\u00a0\u00a0 padding: 0;\r\n\u00a0\u00a0\u00a0 z-index: 300;\r\n\u00a0\u00a0\u00a0 position: absolute;\r\n}\r\n\r\nul li {\r\n\u00a0\u00a0\u00a0 list-style: none;\r\n\u00a0\u00a0\u00a0 float:left;\r\n\r\n\u00a0\u00a0\u00a0 text-align: center;\r\n\u00a0\u00a0\u00a0 }\r\n\r\nul li a {\r\n\u00a0\u00a0\u00a0 padding: 0 20px;\r\n\u00a0\u00a0\u00a0 text-align: center;\r\n\u00a0\u00a0\u00a0 }\r\n\r\n.floatr {\r\n\u00a0\u00a0\u00a0 position: absolute;\r\n\u00a0\u00a0\u00a0 top: 10px;\r\n\u00a0\u00a0\u00a0 z-index: 50;\r\n\u00a0\u00a0\u00a0 width: 70px;\r\n\u00a0\u00a0\u00a0 height: 30px;\r\n\u00a0\u00a0\u00a0 border-radius : 8px;\r\n\u00a0\u00a0\u00a0 -moz-border-radius : 8px;\r\n\u00a0\u00a0\u00a0 -webkit-border-radius : 8px;\r\n\u00a0\u00a0\u00a0 background : rgba(0,0,0,.20);\r\n\u00a0\u00a0\u00a0 -webkit-transition: all .4s ease-in-out;\r\n\u00a0\u00a0\u00a0 -moz-transition: all .4s ease-in-out;\r\n}<\/pre>\n<div dir=\"ltr\"><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/fancy-menu\/\">Ver ejemplo en funcionamiento<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vamos a hablar de un men\u00fa horizontal bastante agradable y editable que se podr\u00eda utilizar en cualquier Web dando un aspecto profesional. Se trata de un fancy menu muy similar conocido como LavaLamp que se desarroll\u00f3 en la biblioteca de Mootools y m\u00e1s tarde se desarroll\u00f3 una versi\u00f3n en jQuery. Podemos lograr [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1412,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5],"tags":[44],"class_list":["post-1411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-jquery","tag-menus"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>LavaLamp Menu - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"LavaLamp Menu - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a hablar de un men\u00fa horizontal bastante agradable y editable que se podr\u00eda utilizar en cualquier Web dando un aspecto profesional. Se trata de un fancy menu muy similar conocido como LavaLamp que se desarroll\u00f3 en la biblioteca de Mootools y m\u00e1s tarde se desarroll\u00f3 una versi\u00f3n en jQuery. Podemos lograr [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-01-14T18:13:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-02T09:17:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/lava-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"574\" \/>\n\t<meta property=\"og:image:height\" content=\"349\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/\",\"name\":\"LavaLamp Menu - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/lava-1.jpg\",\"datePublished\":\"2012-01-14T18:13:14+00:00\",\"dateModified\":\"2019-03-02T09:17:51+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/lava-1.jpg\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/lava-1.jpg\",\"width\":574,\"height\":349},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"LavaLamp Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"LavaLamp Menu - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"LavaLamp Menu - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a hablar de un men\u00fa horizontal bastante agradable y editable que se podr\u00eda utilizar en cualquier Web dando un aspecto profesional. Se trata de un fancy menu muy similar conocido como LavaLamp que se desarroll\u00f3 en la biblioteca de Mootools y m\u00e1s tarde se desarroll\u00f3 una versi\u00f3n en jQuery. Podemos lograr [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-01-14T18:13:14+00:00","article_modified_time":"2019-03-02T09:17:51+00:00","og_image":[{"width":574,"height":349,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/lava-1.jpg","type":"image\/jpeg"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/","url":"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/","name":"LavaLamp Menu - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/lava-1.jpg","datePublished":"2012-01-14T18:13:14+00:00","dateModified":"2019-03-02T09:17:51+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/lava-1.jpg","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/01\/lava-1.jpg","width":574,"height":349},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/lavalamp-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"LavaLamp Menu"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=1411"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1411\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/1412"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=1411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=1411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=1411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}