![\"\"](\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/gmenu-300x97.png\" "\\"gmenu\\"")
<\/a><\/p>\nLo m\u00e1s importante en estos men\u00fas es el archivo CSS, vamos a usar jQuery s\u00f3lo para hacer aparecer o desaparecer las opciones secundarias, pero toda la magia est\u00e1 en el archivo CSS.<\/p>\n
Vamos a imitar el estilo de google, si marca el c\u00f3digo de Google se pueden ver muchos divs ul li y elementos span, la idea es hacer lo mismo sin los elementos adicionales, por lo que se va a utilizar una simple lista de ul li, y todo se envuelve all\u00ed.<\/p>\n
Para obtener en nuestra Web el men\u00fa de google debemos incorporar la librer\u00eda jQuery, el c\u00f3digo CSS necesario y el script para hacer funcionar el men\u00fa.<\/p>\n
<script type=\"text\/javascript\" src=\"jquery-1.4.2.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"jquery.fixedMenu.js\"><\/script>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"fixedMenu_style1.css\" \/>\r\n <script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('document').ready(function(){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('.menu').fixedMenu();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n<\/script><\/pre>\nY luego en el <body> a\u00f1adimos los links necesarios para obtener el men\u00fa, como por ejemplo:<\/p>\n
<div class=\"menu\">\r\n\u00a0\u00a0\u00a0 <ul>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <ul>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"#\">More Examples<\/a>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <ul>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"#\">Plugins and jQuery Examples<\/a><\/li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"#\">Prototype Examples<\/a><\/li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"#\">Mootools Examples<\/a><\/li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <li><a href=\"#\">Javascript Examples<\/a><\/li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/ul>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/li>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/ul>\r\n\u00a0\u00a0\u00a0 <\/ul>\r\n<\/div><\/pre>\nEl c\u00f3digo CSS lo puedes ver observando el ejemplo en funcionamiento. Viendo el c\u00f3digo fuente.<\/p>\n
En el ejemplo mostramos 2 opciones con estilos distintos.<\/p>\n
Ver ejemplos en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"En este art\u00edculo vamos a indicar c\u00f3mo crear un men\u00fa desplegable con jQuery al estilo de Google, tambi\u00e9n se puede utilizar como una \u00abfija\u00bb del men\u00fa. Lo m\u00e1s importante en estos men\u00fas es el archivo CSS, vamos a usar jQuery s\u00f3lo para hacer aparecer o desaparecer las opciones secundarias, pero toda la magia est\u00e1 en […]<\/p>\n","protected":false},"author":1,"featured_media":1693,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[43,44],"class_list":["post-1686","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-google","tag-menus"],"yoast_head":"\n
jQuery Dropdown menu al estilo Google - 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=\"jQuery Dropdown menu al estilo Google - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a indicar c\u00f3mo crear un men\u00fa desplegable con jQuery al estilo de Google, tambi\u00e9n se puede utilizar como una \u00abfija\u00bb del men\u00fa. Lo m\u00e1s importante en estos men\u00fas es el archivo CSS, vamos a usar jQuery s\u00f3lo para hacer aparecer o desaparecer las opciones secundarias, pero toda la magia est\u00e1 en […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/google-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-02-13T14:10:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-11-05T14:45:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/gmenu.png\" \/>\n\t<meta property=\"og:image:width\" content=\"484\" \/>\n\t<meta property=\"og:image:height\" content=\"157\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/google-menu\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/\",\"name\":\"jQuery Dropdown menu al estilo Google - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/gmenu.png\",\"datePublished\":\"2012-02-13T14:10:15+00:00\",\"dateModified\":\"2012-11-05T14:45:20+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/gmenu.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/gmenu.png\",\"width\":484,\"height\":157},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery Dropdown menu al estilo Google\"}]},{\"@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":"jQuery Dropdown menu al estilo Google - 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":"jQuery Dropdown menu al estilo Google - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a indicar c\u00f3mo crear un men\u00fa desplegable con jQuery al estilo de Google, tambi\u00e9n se puede utilizar como una \u00abfija\u00bb del men\u00fa. Lo m\u00e1s importante en estos men\u00fas es el archivo CSS, vamos a usar jQuery s\u00f3lo para hacer aparecer o desaparecer las opciones secundarias, pero toda la magia est\u00e1 en […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-02-13T14:10:15+00:00","article_modified_time":"2012-11-05T14:45:20+00:00","og_image":[{"width":484,"height":157,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/gmenu.png","type":"image\/png"}],"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\/google-menu\/","url":"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/","name":"jQuery Dropdown menu al estilo Google - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/gmenu.png","datePublished":"2012-02-13T14:10:15+00:00","dateModified":"2012-11-05T14:45:20+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/google-menu\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/gmenu.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/gmenu.png","width":484,"height":157},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/google-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jQuery Dropdown menu al estilo Google"}]},{"@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\/1686","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=1686"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1686\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/1693"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=1686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=1686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=1686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/gmenu.png\" "\\"gmenu\\"")
<\/a><\/p>\n