{"id":17,"date":"2012-04-07T10:01:25","date_gmt":"2012-04-07T16:01:25","guid":{"rendered":"http:\/\/j35u5.com.mx\/blog\/?p=17"},"modified":"2014-10-31T11:59:25","modified_gmt":"2014-10-31T17:59:25","slug":"menu-basico-en-css3","status":"publish","type":"post","link":"https:\/\/daimonikos.com\/blog\/menu-basico-en-css3\/","title":{"rendered":"Men\u00fa desplegable en CSS"},"content":{"rendered":"

En este tutorial aprenderemos a crear un men\u00fa desplegable utilizando \u00fanicamente CSS. Utilizaremos una lista desordenada para crear las opciones principales del men\u00fa. Cada opci\u00f3n estar\u00e1 compuesta de un v\u00ednculo y una capa la cual se mostrar\u00e1 al colocar el cursor en el v\u00ednculo.<\/p>\n

Ver ejemplo en funcionamiento<\/a><\/div>\n

Empecemos creando la estructura de nuestro men\u00fa de la siguiente forma:<\/p>\n

\r\n<ul id="menu">\r\n\t<li>\r\n\t\t<a href="#">Inicio<\/a>\r\n\t\t<div><\/div>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href="#">Blog<\/a>\r\n\t\t<div><\/div>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href="#">Tutoriales<\/a>\r\n\t\t<div><\/div>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href="#">Galer\u00eda<\/a>\r\n\t\t<div><\/div>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href="#">Contacto<\/a>\r\n\t\t<div><\/div>\r\n\t<\/li>\r\n<\/ul>\r\n<\/pre>\n
Colocaremos despu\u00e9s el contenido que se desplegar\u00e1. Ahora daremos estilos b\u00e1sicos a la lista:<\/p>\n
\r\nul#menu{\r\n\tlist-style:none;\r\n}\r\nul#menu li{\r\n\tfloat:left;\r\n\tposition:relative;\r\n}\r\nul#menu li:hover{\r\n\tborder-bottom:0;\r\n\tmargin-top:-7px;\r\n\tpadding:7px 0 1px 0;\r\n\tz-index:500;\r\n}\r\n<\/pre>\n
Al especificar un atributo seguido de :hover<\/em> podemos indicar los estilos al pasar el cursor sobre el elemento. Ahora colocamos los estilos para el v\u00ednculo y el contendo desplegable:<\/p>\n
\r\nul#menu li a{\r\n\tbackground:#333;\r\n\tcolor:#FFF;\r\n\tdisplay:block;\r\n\tpadding:10px;\r\n\ttext-decoration:none;\r\n}\r\nul#menu li div{\r\n\tbackground:#eee;\r\n\tleft:-999em;\r\n\tpadding:10px;\r\n\tposition:absolute;\r\n\twidth:150px;\r\n\tz-index:1000;\r\n}\r\nul#menu li:hover div{\r\n\tleft:0px;\r\n\ttop:auto;\r\n}\r\n<\/pre>\n
La propiedad left<\/em> colocar\u00e1 al contenido desplegable fuera de la pantalla, y ser\u00e1 visible cuando coloquemos el cursor sobre el elemento de la lista.<\/p>\n","protected":false},"excerpt":{"rendered":"
En este tutorial aprenderemos a crear un men\u00fa desplegable utilizando \u00fanicamente CSS. Utilizaremos una lista desordenada para crear las opciones principales del men\u00fa. Cada opci\u00f3n estar\u00e1 compuesta de un v\u00ednculo y una capa la cual se mostrar\u00e1 al colocar el cursor en el v\u00ednculo. Ver ejemplo en funcionamiento Empecemos creando la estructura de nuestro men\u00fa […]<\/p>\n","protected":false},"author":1,"featured_media":175,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[8,9],"class_list":["post-17","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css","tag-menu"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":0,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts\/17\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/media\/175"}],"wp:attachment":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/media?parent=17"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/categories?post=17"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/tags?post=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}